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. hibernate 中根据id删除一条记录的语句

    qid name like content 1 A 1 the first text 2 B 2 the Second text 1 C 3 the Third text 如上表所示,当我们需要某个q ...

  2. linux添加启动器图标（Ubuntu为例）

     添加启动器图标,以eclipse为例,%表示命令提示符,shell命令:%nano /usr/share/applications/eclipse.desktop-----------[Deskto ...

  3. Eclipse复制时的中文乱码问题

    点击"Project"--"Properties"--"Resource",在其中改变"Text file encoding&qu ...

  4. spring源码：ApplicationContext的增强功能（li）

    ApplicationContext作为资源加载器:ApplicationContext作为事件发布者: Java原生提供了事件发布机制------EventObject对象作为发布的事件,Event ...

  5. Java内部类学习笔记

    20160923 定义:将一个类的定义放在另一个类的内部: 从外部类的非静态方法之外,创建某个内部类的对象:OutClassName.InnerClassName: 内部类拥有所有其外部类的成员的访问 ...

  6. 使用Mavne生成可以执行的jar文件

    到目前为之,还没有运行HelloWorld的项目,不要忘了HelloWorld类可是有一个main方法的.使用mvn clean install命令默认生成的jar 包是不能直接运行的.因为带有mai ...

  7. Stream

    Stream的好处 1.Stream AP的引入弥补了JAVA函数式编程的缺陷.2.Stream相比集合类占用内存更小:集合类里的元素是存储在内存里的,Stream里的元素是在访问的时候才被计算出来. ...

  8. mybatis hibernate比较

    开发速度: 如果一个项目中用到的复杂的查询基本没有,就是简单的增删该查,这样选择hibernate效率就很快了,因为基本的sql语句已经被封装好了,根本不用去写sql语句,但是对于一个大型项目,复杂语 ...

  9. jquery的选择器

    一.基本选择器 1.$("#id") id选择器,返回单个元素 2.$(".class") class选择器,返回集合元素 3.$("element& ...

  10. animation-timing-function: steps() 详解

    在应用 CSS3 渐变/动画时,有个控制时间的属性 <animation-timing-function> .它的取值中除了常用到的 贝萨尔曲线以外,还有个让人比较困惑的 steps()  ...