创建自定义的指令

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

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

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

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

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

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

元素名

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="angular-1.6.3/angular.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="myDirective">
  9.     <my-angular></my-angular>
  10. </div>
  11. <script>
  12.     var app=angular.module("myDirective",[]);
  13.     app.directive("myAngular", function() {//注意名称myAngular---<my-angular>
  14.         return {
  15.             template : "<p>自定义指令!</p>"
  16.         };
  17.     });
  18. </script>
  19. </body>
  20. </html>

属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6. </head>
  7. <body ng-app="myApp">
  8.  
  9. <div runoob-directive></div>
  10.  
  11. <script>
  12. var app = angular.module("myApp", []);
  13. app.directive("runoobDirective", function() {
  14.     return {
  15.         template : "<h1>自定义指令!</h1>"
  16.     };
  17. });
  18. </script>
  19.  
  20. </body>
  21. </html>

类名：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6. </head>
  7. <body ng-app="myApp">
  8.  
  9. <div class="runoob-directive"></div>
  10.  
  11. <script>
  12. var app = angular.module("myApp", []);
  13. app.directive("runoobDirective", function() {
  14.     return {
  15.         restrict : "C",
  16.         template : "<h1>自定义指令!</h1>"
  17.     };
  18. });
  19. </script>
  20.  
  21. <p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>
  22.  
  23. </body>
  24. </html>

注释：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6. </head>
  7. <body ng-app="myApp">
  8.  
  9. <!-- directive: runoob-directive -->
  10.  
  11. <script>
  12. var app = angular.module("myApp", []);
  13. app.directive("runoobDirective", function() {
  14.     return {
  15.         restrict : "M",
  16.         replace : true,
  17.         template : "<h1>自定义指令!</h1>"
  18.     };
  19. });
  20. </script>
  21.  
  22. <p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>
  23.  
  24. <p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>
  25.  
  26. </body>
  27. </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. AF_INET

    AF_INET(又称PF_INET)是 IPv4 网络协议的套接字类型,AF_INET6 则是 IPv6 的:而AF_UNIX 则是Unix系统本地通信. 选择AF_INET 的目的就是使用IPv4 ...

  2. 面向对象oop

    类和对象 1.什么是类?什么是对象? 1)现实世界是由很多很多对象组成的 基于对象抽出了类 2)对象:真实存在的单个的个体 类:类型/类别,代表一类个体 3)类中可以包含: 3.1)所有对象所共有的属 ...

  3. windows访问控制列表 --ACL(Access Control List)

    1.定义 ACL是一个windows中的表示用户(组)权限的列表. Access Control List(ACL) Access Control Entry(ACE) ... 2.分类 ACL分为两 ...

  4. 基于nodejs+webSocket的聊天室（实现：加入聊天室、退出聊天室、在线人数、在线列表、发送信息、接收信息）

    1  安装 socket.io模块 npm install "socket.io": "latest" 2 app.js相关 ws = require('soc ...

  5. ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL&EF

    本章将介绍如何通过Entity Framework来使用My SQL,之前介绍EF时介绍了provider这个配置项,而且也介绍了在ASP.NET访问MySQL数据仍然是通过ADO.NET,不同的地方 ...

  6. struts2-学习笔记（三）

    Struts2 学习笔记(三) 1.ognl概述: OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写,它是一个开源项目. Struts2框架使用O ...

  7. structs2的核心和工作原理

     在学习struts2之前,首先我们要明白使用struts2的目的是什么?它能给我们带来什么样的好处? 设计目标 Struts设计的第一目标就是使MVC模式应用于web程序设计.在这儿MVC模式的 ...

  8. Javascript 面向对象编程—封装

      前  言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...

  9. NSTimer的问题

    iOS开发中,涉及到定时的问题,我们通常使用NSTimer来解决,例如下面的代码. SFClass.h #import <Foundation/Foundation.h> @interfa ...

  10. 使用 Hibernate 和 MySQL 需要知道的五件事

    https://www.thoughts-on-java.org/5-things-you-need-to-know-when-using-hibernate-with-mysql/ 作者:Thorb ...