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. 『.NET Core CLI工具文档』（十二）dotnet-pack

    说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:dotnet-pack 翻译:dotnet-pack 名称 dotnet-pack - 将代码打包成 NuGet 包 概 ...

  2. .Net语言 APP开发平台——Smobiler学习日志：如何快速实现类似于微信的悬浮显示二维码效果

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...

  3. DateHelper.cs日期时间操作辅助类C#

    //==================================================================== //** Copyright © classbao.com ...

  4. 关于mysql 和Oracle的一大堆麻烦问题的解决方案

    [INS-20802] Oracle Net Configuration Assistant 失败 在百度上找了半天并没有找到可靠的解决方案,最后是可以安装完成的,之后我 通过SQL Plus连接就报 ...

  5. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  6. 【IOS开发笔记03-视图相关】简单计算器的实现

    UIView 经过前几天的快速学习,我们初步了解的IOS开发的一些知识,中间因为拉的太急,忽略了很多基础知识点,这些知识点单独拿出来学习太过枯燥,我们在今后的项目中再逐步补齐,今天我们来学习APP视图 ...

  7. Mockjs，模拟数据生成器

    (推荐使用)Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. 提供了以下模拟功能: 1. 根据数据模板生成模拟数据. 2. 模拟Ajax请求,生成并返回模拟 ...

  8. jQuery选择器笔记

    1.$(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class= ...

  9. System.Json 使用注意

    在xamarin中对json字符串进行解析,使用System.Json时出现怪问题: json-string = { "ret" : "OK" } 使用如下代码 ...

  10. 在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service

    在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service 1.在 /etc/rc.d/init.d/ 目录下创建一个名字和服务名完全相同的 shell 脚本文件 joyup ...