创建自定义的指令

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

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

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

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

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

  • 元素名
  • 属性
  • 类名
  • 注释

元素名

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

<div ng-app="myDirective">

    <my-angular></my-angular>

</div>

<script>

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

    app.directive("myAngular", function() {//注意名称myAngular---<my-angular>

        return {

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

        };

    });

</script>

</body>

</html>

属性：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

</head>

<body ng-app="myApp">

<div runoob-directive></div>

<script>

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

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

    return {

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

    };

});

</script>

</body>

</html>

类名：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

</head>

<body ng-app="myApp">

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

<script>

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

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

    return {

        restrict : "C",

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

    };

});

</script>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>

</body>

</html>

注释：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

</head>

<body ng-app="myApp">

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

<script>

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

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

    return {

        restrict : "M",

        replace : true,

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

    };

});

</script>

<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>

</body>

</html>

限制使用

你可以限制你的指令只能通过特定的方式来调用。

restrict 值可以是以下几种:

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

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

AngularJS学习篇（三）的更多相关文章

  1. angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  2. angularJS学习（三）——搭建学习环境

    1.安装Node.js 和Testacular 1.1. 安装Node.js及配置部分,在另一篇博文:node.js的安装里面讲到了,地址是:http://www.cnblogs.com/tianxu ...

  3. angularjs学习笔记三——directive

    AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...

  4. AngularJS学习篇（一）

    AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...

  5. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  6. AngularJS学习篇（二十三）

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  7. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  8. AngularJS学习篇（二十一）

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  9. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

随机推荐

  1. webservice部署到服务器报错

    System.Net.WebException: 基础连接已经关闭: 发送时发生错误. ---> System.IO.IOException: 从传输流收到意外的 EOF 或 0 个字节. 在 ...

  2. 定制Three.js中Material属性

    1.找到想要更改的着色器代码

  3. zoj3710 friends（floyd变形）

    Friends Time Limit: 2 Seconds      Memory Limit: 65536 KB Alice lives in the country where people li ...

  4. PHP Server Nginx 安装

    1. PHP 安装: http://jingyan.baidu.com/article/b2c186c8f16d05c46ef6ff3c.html PHP 问题: http://www.cnblogs ...

  5. 测试String.Format中的Format参数

    DateTime datetime = DateTime.Now; Console.WriteLine(String.Format("{0:d}", datetime)); // ...

  6. Rolling Hash(Rabin-Karp算法)匹配字符串

    您可以在我的个人博客中访问此篇文章: http://acbingo.cn/2015/08/09/Rolling%20Hash(Rabin-Karp%E7%AE%97%E6%B3%95)%E5%8C%B ...

  7. Java中数组的遍历

    (I)标准for循环遍历数组 例如代码片段: int [] nums = new int [] {0,1,2,3,4,5,6,7,8,9}; for(int i=0;i<11;i++){ Sys ...

  8. js金钱转大写

    function Arabia_to_Chinese(Num) { // var money=$("#deal_amount").val(); for ( i = Num.leng ...

  9. 【ASP.NET MVC 学习笔记】- 12 Filter

    本文参考:http://www.cnblogs.com/willick/p/3331520.html 1.Filter(过滤器)是基于AOP(Aspect-Oriented Programming 面 ...

  10. Python实现正交实验法自动设计测试用例

    1.简介 正交试验法是研究多因素.多水平的一种试验法,它是利用正交表来对试验进行设计,通过少数的试验替代全面试验,根据正交表的正交性从全面试验中挑选适量的.有代表性的点进行试验,这些有代表性的点具备了 ...