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. 解决NTKO Office中文文件名保存到服务器时出现乱码的问题

    再使用NTKO office控件时,在ntko往服务器提交文件时,中文文件名会出现乱码的问题! 其实解决这个问题可以换一种思路,在ntko往服务器提交文件时英文肯定是不会出现乱码的问题的! 那么想办法 ...

  2. EXCEL中多级分类汇总空白字段填充

    使用场景,多级分类汇总后,在汇总的字段中显示空白,这样对我们直接取值做表带来十分不更(假像有5000条记录,1000条汇总项) 相关技术,INDIRECT函数,单元格定位功能. 在数据区域外任意一个单 ...

  3. 浅谈Collection集合

    俗话说:一个东西,一件事都离不开三句话:"是什么,为什么,怎么办" 集合是什么: 集合简单的说一个数组集合的高级体现,用来存储数据或对象的容器: 集合为什么存在: 集合只是体现了对 ...

  4. 使用WebRTC搭建前端视频聊天室——数据通道篇

    本文翻译自WebRTC data channels 在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩展成 ...

  5. Android游戏开发实践(1)之NDK与JNI开发01

    Android游戏开发实践(1)之NDK与JNI开发01 NDK是Native Developement Kit的缩写,顾名思义,NDK是Google提供的一套原生Java代码与本地C/C++代码&q ...

  6. Android MVP 设计模式

    1.基本概念 Model    : 模型   负责处理数据的加载或者存储,比如从网络或本地数据库获取数据等: View     : 视图    负责界面数据的展示,与用户进行交互: Presenter ...

  7. Android自定义ViewGroup

    视图分类就两类,View和ViewGroup.ViewGroup是View的子类,ViewGroup可以包含所有的View(包括ViewGroup),View只能自我描绘,不能包含其他View. 然而 ...

  8. iOS真机测试could not find developer disk image

    兄弟你该升级xcode的了,xcode的版本已经落后于手机的iOS版本了

  9. 如何在 Evernote 中支持代码高亮

    Evernote 本身不支持代码高亮,在 Apple App-Store 上有一个建立在 Evernote 上的 EverCode,可以支持代码高亮,需要付费.虽然只有￥5,但是这个 App 似乎只能 ...

  10. word 2010 建立多级结构和目录

    点击“开始”中的“样式”中右下角按钮   点击弹出窗口中最下方第三个按钮   点击“推荐”选项卡,再选择要显示的标题,然后点击“显示”.然后按照需要,分别把“标题3”“标题4”等显示.最后点确定即可. ...