除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>

</body>

</html>

你可以通过以下方式来调用指令：

  • 元素名       <runoob-directive></runoob-directive>
  • 属性          <div runoob-directive></div>
  • 类名          <div class="runoob-directive"></div>
  • 注释          <!-- directive: runoob-directive -->
<!DOCTYPE html>

<html><head>

    <meta charset="utf-8">

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<div runoob-directive></div>

<div class="runoob-directive"></div>

<!-- directive: runoob-directive -->

<script>

    var app = angular.module("myApp", []);

    app.directive("runoobDirective", function() {

        return {

            restrict : "EACM",

            template : "<h1>自定义指令!</h1>"

        };

    });

</script>

</body>

</html>

restrict 值可以是以下几种:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

AngularJS:directive自定义的指令的更多相关文章

  1. angularjs directive (自定义标签解析)

    angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...

  2. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  3. angularjs Directive自定义指令详解

    作用:需要用Directive有下面的情景: 1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 3.使用公共代码,减少重复 ...

  4. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

  5. 走进AngularJs(三)自定义指令-----（上）

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...

  6. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  7. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  8. 36.创建自定义的指令directive

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...

  9. 走进AngularJs(四)自定义指令----（中）

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

随机推荐

  1. WPF设计の画刷（Brush）

    一.什么是画刷 画刷是是一种渲染方式,用于填充图形形状,如矩形.椭圆.扇形.多边形和封闭路径.在GDI+中,画刷分为以下几种:SolidBrush,TextureBrush,HatchBrush,Li ...

  2. public private protected default

    public private protected default 这几个限定访问控制符只是在编译阶段起作用,在运行阶段不起作用 private修饰符 , 本类可以访问 default修饰符 , 本类, ...

  3. UVA1471-Copying Books（二分答案）

    Problem UVA1471-Copying Books Accept: 2669  Submit: 22797Time Limit: 3000 mSec Problem Description B ...

  4. linux 压缩文件或文件夹

    zip demo.mp4.zip demo.mp4 zip -r videos.zip videos # 压缩文件夹需要加-r

  5. P1638 逛画展（直尺法）

    这道题是直尺法的模板题: #include<iostream> using namespace std; ; ; int n, m, a[maxn], vis[M]; int main() ...

  6. IDEA+控制台使用搜索\查找功能

  7. Python脱产8期 Day06 2019/4/18

    一 深浅拷贝 例:ls = [1, 'abc', [10]] 1.值拷贝:s1 = ls    # ls1直接将ls中存放的地址拿过来,>ls内部的值发生任何变化,ls1都会随之变化. 2.浅拷 ...

  8. Volley使用

    Volley是常用的网络请求框架,主要的用法如下: 获取字符串: public static void volleyTest1(final Context context){ RequestQueue ...

  9. 欢迎加入.NET Core 技术QQ群一起讨论交流学习

    群号:4656606 介绍:本群主要讨论.NET Core及其相关技术,如:IdentityServer4.ABP.Dcoker.Linux.Devops.微服务等,如果你正在使用或者准备使用.NET ...

  10. Ubuntu Desktop: 备份与还原

    Ubuntu Desktop 版本默认自带了图形化的备份/还原工具 Déjà Dup.该工具主要用来备份和还原用户的数据,当然我们也可以用它来备份/还原系统的数据.本文主要介绍 Déjà Dup 的主 ...