1.　　AngularJS指令的特点：

  • AngularJS通过被称为指令的新属性来扩展HTML，指令的前缀为ng-。
  • AngularJS通过内置的指令来为应用添加功能。
  • AngularJS允许你自定义指令。

2.　　下面介绍下常见的AngularJS指令：

  • ng-app指令：定义了AngularJS 应用程序的根元素。在网页加载完毕时会自动引导（自动初始化）应用程序。
  • ng-init指令：为 AngularJS 应用程序定义了初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
  • ng-model指令：绑定HTML元素到应用程序数据。也可以为应用程序数据提供类型验证（number、email、required）、为应用程序数据提供状态（invalid、dirty、touched、error）、为 HTML 元素提供 CSS 类、绑定 HTML 元素到 HTML 表单。
  • ng-repeat指令：对于集合中（数组中）的每个项会克隆一次HTML元素。 
    <!DOCTYPE html>
    
<html>

    <head>
    
        <meta charset="UTF-8">
    
        <title></title>
    
        <script type="text/javascript" src="js/angular.min.js"></script>
    
    </head>

    <body ng-app="">
    
        <div ng-init="quantity=1;price=5"></div>
    
        <h2>价格计算器</h2>
    
        数量: <input type="number" ng-model="quantity">
    
        价格: <input type="number" ng-model="price">

        <p><b>总价:</b> {{quantity * price}}</p>

        <div ng-init="students=[
    
            {name:'小明',class:'一年级一班'},
    
            {name:'小红',class:'一年级二班'},
    
            {name:'小方',class:'一年级三班'}
    
        ]">
    
            <p>循环对象</p>
    
            <ul>
    
                <li ng-repeat="x in students">
    
                    {{x.name+" "+x.class}}
    
                </li>
    
            </ul>
    
        </div>
    
    </body>
    
</html>

3.　　创建自定义的指令：

  • 除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
  • 我们可以使用  .directive  函数来添加自定义的指令。
  • 要调用自定义指令，HTML 元素上需要添加自定义指令名。
  • 使用驼峰法来命名一个指令，myDirective，但是在使用的时候要用-分割开，my-directive。
  • 使用自定义指令有四种方式,可以通过restrict属性来限制使用，E 作为元素名使用、C 作为类名使用、A 作为属性使用、M 作为注释使用。
    • 通过元素名：

      <my-directive></my-directive>
    • 通过类名：必须设置 restrict 的值为 "C" 才能通过类名来调用指令。 
      <div class="my-directive"></div>
    • 通过属性： 
      <div my-directive></div>
    • 通过注释：我们需要在该实例添加 replace 属性， 否则是不可见的。 
      <!-- directive: my-directive -->
  • 案例展示：这里是通过元素名的方式来使用自定义指令，别的方式大家可以自行尝试。 
    <!DOCTYPE html>
    
<html>

    <head>
    
        <meta charset="UTF-8">
    
        <title></title>
    
        <script type="text/javascript" src="js/angular.min.js"></script>
    
    </head>

    <body ng-app="myApp">
    
        <my-directive></my-directive>

        <script>
    
        var app = angular.module("myApp", []);
    
        app.directive("myDirective", function() {
    
            return {
    
                template: "<h1>这是我的自定义指令!</h1>"
    
            };
    
        });
    
    </script>
    
    </body>
    
</html>

AngularJS指令的更多相关文章

  1. angularjs指令参数transclude

    angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...

  2. angularjs 指令—— 绑定策略（@、=、&）

    angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...

  3. AngularJS 指令

    AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指 ...

  4. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  5. angularJs指令执行的机制==大概的三个阶段

    第一阶段:加载阶段 angularJs要运行的话,需要去等待angular.js加载完成,加载完之后呢,angular就会去查找到ng-app这个指令,ng-app在每个应用里面只能出现一次, 它也就 ...

  6. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  7. AngularJs指令（一）

    AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...

  8. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  9. AngularJS指令进阶 – ngModelController详解

    AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...

随机推荐

  1. IOS 2D游戏开发框架 SpriteKit-->续(创建敌对精灵)

    这次包括之后讲的spritekit 我都会围绕一个案例来说,这个案例就是一个简单的2d飞机大战游戏,今天这里我讲创建敌对精灵,就是敌对飞机,敌对飞机不停的被刷新到屏幕上.....当然这里涉及到的类其实 ...

  2. 网页mp3语音展示，点击图片放大，点击图片跳转链接，调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  3. jdk源码分析PriorityQueue

    一.结构 PriorityQueue是一个堆,任意节点都是以它为根节点的子树中的最小节点 堆的逻辑结构是完全二叉树状的,存储结构是用数组去存储的,随机访问性好.最小堆的根元素是最小的,最大堆的根元素是 ...

  4. Microsoft Dynamics CRM 解决数据大于5000时，页面上只能导出5000+数据。

    页面显示: update [MSCRM_CONFIG].[dbo].[DeploymentProperties] set IntColumn=10000 --调整成10000+   页面导出: 一.在 ...

  5. Android Weekly Notes Issue #223

    Android Weekly Issue #223 September 18th, 2016 Android Weekly Issue #223 本期内容包括: Offline时间戳处理; Acces ...

  6. iOS开发：创建真机调试证书及描述文件

    iOS开发:创建真机调试证书及描述文件 关于苹果iOS开发,笔者也是从小白过来的,经历过各种困难和坑,其中就有关于开发证书,生产证书,in_house证书,add_Hoc证书申请过程中的问题,以及上架 ...

  7. iOS 中的 HotFix 方案总结详解

    相信HotFix大家应该都很熟悉了,今天主要对于最近调研的一些方案做一些总结.iOS中的HotFix方案大致可以分为四种: WaxPatch(Alibaba) Dynamic Framework(Ap ...

  8. 关于WCF测试时出现无法从***获取元数据问题

    在我们已经创建成功一个WCF服务后,通过本机localhost访问和测试均没有任何问题.但是寄宿在IIS/其他平台下时便会出现以下的错误信息 1.使用WCF Test Client错误 2.通过C#引 ...

  9. 原创 C++应用程序在Windows下的编译、链接（四）动态链接

    4动态链接 4.1概述 在静态链接阶段,链接器为PE文件生成了导入表,导出表,符号表,并调整了Call指令后面的操作数,在程序调用的时候,能够直接地或者间接地定位到IAT中的某个位置,在PE文件中,该 ...

  10. 0041 Java学习笔记-多线程-线程池、ForkJoinPool、ThreadLocal

    什么是线程池 创建线程,因为涉及到跟操作系统交互,比较耗费资源.如果要创建大量的线程,而每个线程的生存期又很短,这时候就应该使用线程池了,就像数据库的连接池一样,预先开启一定数量的线程,有任务了就将任 ...