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. 执行插入语句，object val = cmd.ExecuteScalar() val = null

    在写接口的过程中遇到错误:空对象不能转换为值类型 因为我们使用的是petapoco,经过调试后发现是 object val = cmd.ExecuteScalar() 这一句造成的报错, val = ...

  2. [译]Godot系列教程五 - 制作Godot编辑器插件

    制作插件 下文仅针对2.1版本. 关于插件 插件是为编辑器扩展出更多有用工具的重要方式.它可以完全用GDScript和标准场景开发,甚至都不需重新加载编辑器就可生效.不像模块,你无需创建C++代码.也 ...

  3. MySQL存储过程（转）

    一.MySQL 创建存储过程 "pr_add" 是个简单的 MySQL 存储过程,这个存储过程有两个 int 类型的输入参数 "a"."b" ...

  4. 使用page object模式抓取几个主要城市的pm2.5并从小到大排序后写入txt文档

    #coding=utf-8from time import sleepimport unittestfrom selenium import webdriverfrom selenium.webdri ...

  5. 怎样在asp中产生10个0－99的随机数

    <% randomize for i=1 to 10 response.write cint(rnd*100) next %> randomize是随机初始化,使用rnd之前必须要先来一句 ...

  6. 【项目管理】图解GitHub基本操作

    一.注册并登陆到github网站 1.1.打开github网站首页(https://github.com/) 1.2.注册一个自己的github账号 创建账户后再验证自己的邮箱,然后就可以登陆到git ...

  7. minSdkVersion maxSdkVersion targetSdkVersion target 的区别

    minSdkVersion 描述:app最低支持的sdk版本号 作用:如果手机SdkVersion小于app中定义的minSdkVersion,则android系统不允许安装该app 定义位置:And ...

  8. git基础

    1.新的未跟踪文件 新创建的README文件没有进行任何跟踪 $ git status On branch master Untracked files: (use "git add < ...

  9. Linux：常用命令

    文件压缩.解压 网络.进程 磁盘.文件使用情况 内存使用 1.文件压缩.解压 1)tar.gz文件解压: .bin.tar.gz 解压到指定目录: (指定的目录是存在的) .bin. 2)zip 文件 ...

  10. 用lumen构建API的相关流程

    概述 Lumen是一个基于Laravel的微框架,主要用于小型应用和微服务,专注于性能和速度的优化,该框架一个重要的应用就是构建 RESTAPI. 为什么用Lumen构建REST API Lumen访 ...