AngularJs功能（六）--指令

摘要：事件只针对输入框值的真实修改，而不是通过来修改。指令将给定表达式的值替换元素的内容。指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在上使用指令。

指令系统（Directive）是Angular应用的一个重要特性。

是通过对DOM元素的标签丶属性来增强HTML表现力，为其增加一些特定功能。
本篇参考文档Angular菜鸟教程

这里介绍的是常用的一些angularJs内置指令：

1、ng-model
这个是将表单控件和当前作用域的属性进行绑定。需要注意绑定的scope的范围（父scope与子scope）。
ng-model主要绑定的元素包括input， select， textarea 。
ng-model的元素都有：
ng-valid（可用），
ng-invalid （不可用）
ng-pristine（用户为对这个元素进行操作过），
ng-dirty（元素的模型发生改变的话）属性； 这几个属性都是布尔值。

2、ng-init
该指令被调用时会初始化内部作用域。一般不建议使用此参数。

3、ng-app
用于告诉 AngularJS 应用当前这个元素是根元素。
所有 AngularJS 应用都必须要要一个根元素。
HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。
下边是关于ng-app需要注意的点：
   1>这个是必需的。使用该指令自动启动一个AngularJS应用。
   2>ngapp指令指定的应用程序的根元素，通常放置在网页的根元素如body或html 标签。
   3>只有一个AngularJS应用可以自动引导每个HTML文档。
   4.第一ngapp找到该文件将定义自动引导的根元素的应用。
   5>运行多个应用程序在一个HTML文件，您必须手动引导他们使用angular.bootstrap。
   6>AngularJS应用不能互相嵌套。 
   7>你可以指定一个AngularJS模块被用于应用程序的根模块。
   8>该模块将被加载到应用程序时，引导到$injector对象中。
   9>它应该包含所需的应用程序代码，或依赖于将包含代码的其他模块的依赖关系。

4、ng-controller
用于为你的应用添加控制器。

//expression     控制器名。

在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。

5、ng-form
Angular表单其实是Angular提供的Directive，它有一个别名叫ng-form。是这个Directive实例化了一个FormController来负责表单内的页面逻辑（主要是表单验证）。

6、ng-disabled
设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。
我们可以在AngularJS中通过表达式返回值true/false令其生效。

//expression 如果表达式返回true，则设置为元素添加 disabled 属性。

7、ng-readonly
设置表单输入字段设为只读。
可以通过表达式返回值true/false将表单输入字段设为只读。

8、ng-checked
设置是否选中复选框。
其中 ng-true-value="""" ng-false-value=""""，可用来设置选中时或不选中时对应的值

9、ng-selected
用于设置  列表中的  元素的 selected 属性。ng-selected 属性的表达式返回 true 则选项被选中。
10、ng-show/ng-hide根据表达式显示/隐藏HTML元素，注意是隐藏，不是从DOM移除（ng-if才是移除）对于大对象的DOM，可以用它，但如果是小对象的DOM，建议使用ng-if
11、ng-changeng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。ng-change 指令需要搭配 ng-model 指令使用。AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。
12、{{}}其实这个也是一个指令，也许觉得和ng-bind差不多，但页面渲染略慢时可能会被看到。另外，{{}}的执行远不如ng-bind，只是用起来很方便。
13、ng-bind使用给定的变量或表达式的值来替换 HTML 元素的内容。如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。ng-bind的行为和{{}}差不多，只是我们可以用这个指令来避免FOUC(Flash Of Unrendered Content)未渲染导致的闪烁。ng-bind-template指令将给定表达式的值替换 HTML 元素的内容。当你想在 HTML 元素上绑定多个表达式时可以使用 ng-bind-template 指令。

14、ng-cloakng-cloak也可以为我们解决FOUC。 ng-cloak会将内部元素隐藏，直到路由调用对应的页面。FOUC ：文档样式短暂失效如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content)存在完全是为了用户体验， 如果一个html界面angular.js还没加载进来，那么界面会有{{}}这样的标志，如果{{}}标志多了，用户会一脸蒙蔽 啊， ng-cloak如果加在根节点，那么界面的{{}}会被隐藏，等到{{}}完全编译成动态数据的时候界面才可见；
15、ng-if如果ng-if中的表达式为false，则对应的元素整个会从DOM中移除而非隐藏，但审查元素时你可以看到表达式变成注释了。如果相进行隐藏，可以使用ng-hide。
16、ng-switchngSwitch指令包含ng-switch-when、ng-switch-default功能类似switch，ng-switch-when指条件条件符合将显示这个dom元素， ng-switch-default指条件都不符合默认显示的元素。
17、ng-repeat遍历集合(数组)，给每个元素生成模板实例，每个实例的作用域中可以用一些特殊属性，如下

$index : 表示当前item的索引,
$first : 如果item为第一个，那么$first为true ,
$middle : 如果item不是开头，不是结尾$middle为true,
$last : 如果item是最后一个，  $last为true,
$even : 如果索引为偶数， 那么$even为true,否则为false
$odd : 同上， 索引为奇数$odd为true....;



18、ng-src指令覆盖了 　　那么在页面开始加载到ng编译完成之前，页面上会一直显示一张错误的图片，因为路径{{imgUrl}}还未被替换。为了避免这种情况，我们使用ng-src指令，这样在路径被正确得到之前就不会显示找不到图片。同理，a标签的href属性也需要换成ng-href，这样页面上就不会先出现一个地址错误的链接。19、ng-href覆盖了原生的 a 元素 href 属性。如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而不是 href。ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。



20、ng-class指令用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串，对象，或一个数组。如果是字符串，多个类名使用空格分隔。如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。
21、ng-click点击事件


//
$scope.event=function(){}


22、ngKeyup
23、ngKeydown
24、ngKeypress
25、ngMousedown、ngMouseenter、ngMouseleave、ngMousemove、ngMouseover、ngMouseup鼠标事件
26、ngTrim去除左右空格
27、ng-include指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。ng-include 属性的值可以是一个表达式，返回一个文件名。默认情况下，包含的文件需要包含在同一个域名下。ng-include指令是指这个指令标签的innerHTML为指定的url这个url为相对与当前目录的url地址或者绝对地址angular会通过ajax请求该地址然后把地址的内容作为指令元素innerHTML填充；
28、ng-list指令将字符串转换为数组，并使用逗号分隔。ng-list 指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在 input 上使用 ng-list 指令。ng-list 属性值定义了分隔符。ng-list这个指令要和ng-model合起来用ng-list在输入框的表现通过split(",")的数组才是实际的modelng-list默认为","逗号要设置成自定义的区分符，直接为ng-list赋值即可;
29、ng-pattren匹配这个输入框的输入值是否符合这个正则，如果不匹配，这个元素会被加上ng-invalid的class， 如果匹配会被加上ng-valid的class在表单校验中为详细介绍。。
30、ng-paste  ng-copy ng-cut 用于告诉 AngularJS 文本在 HTML 元素上粘贴时需要执行的操作。ng-paste 指令不会覆盖元素的原生 onpaste 事件, 事件触发时，ng-paste 表达式与原生的 onpaste 事件将都会执行。如果输入框的值是粘帖的，那么ng-paste就为真。ng-copy，ng-cut也是同理
31、ng-non-bindable　ng-non-bindable指令指该元素的内部{{**}}不被绑定和转义，不受angular的掌控：
32、ng-open用于设置 details 列表的 open 属性。如果 ng-open 的表达式返回 true 则 details 列表是可见的。这个个人认为和ng-show， g-hide差不多， 区别是ng-open只能绑定details元素， 标签用于描述文档或文档某个部分的细节。（details标签目前只有webkit浏览器支持）
33、input里的一些属性novalidate属性（可无值）到form标签上，这样可以保证在表单不合法的情况下阻止浏览器继续提交数据。 使用 ng-model 属性进行绑定的表单，会自动的添加一些 class 样式，如：@非必填表单初始化时会添加 .ng-pristine 和 .ng-valid 两个class样式。当表单为非空时 class 样式会变成 .ng-valid 和 .ng-dirty 。其中将 .ng-pristine 变成了 .ng-dirty 。 @必填表单初始化时会添加 .ng-pristine 、.ng-invalid 和 .ng-invalid-required 三个class样式。当表单为非空时 class 样式会变成 .ng-dirty 、.ng-valid 和 .ng-valid-required 。ngMinLength,，ngMaxLength，ng-parttern，通过正则判断input是否匹配，表单验证属性：$dirty     表单有填写记录$valid     字段内容合法的$invalid     字段内容是非法的$pristine     表单没有填写记录ng-change，ng-vlaue就只是设置值而已  不双向绑定数据（同样在表单验证中会详细介绍）
自定义指令
自定义是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或Class属性或Attr属性，还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下，需要用Directive有下面的情景：1.使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。2.*抽象一个自定义组件，在其他地方进行重用。
指令的属性
先上代码
angular.module("MetronicApp").directive("directiveName", function factory(injectables) {
  var directiveObject = {　　
        priority: 0,
    　　template: "helloworld",
    　　templateUrl: "directive.html",
    　　replace: false,
    　　transclude: false,
    　　restrict: "EA",
    　　scope: false,
    　　link: function postLink($scope, $element, $attrs) {
    　　//code
        }
        controller: ["$scope", function ($scope) {
        //code
        }
   };
   return directiveObject
});
name就是指令名
对应上面代码中的directiveName
restrict  定义指令的出现形式
（字符串）可选参数，指明指令在DOM里面以什么形式被声明；取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；当然也可以两个一起用，比如EA.表示即可以是元素也可以是属性。E(元素)： A(属性)： C(类)：  M(注释)：<--directive:directiveName expression-->  鉴于浏览器兼容问题。推荐 restrict :"A",即取值为属性。
scope 作用域，与值绑定
（1）默认值false。表示继承父作用域;（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;（3）{}。表示创建一个全新的隔离作用域；   scope: { 　　   lover: "=",   　　 name: "@",  　　  say: "&"　　}但是，如果我想将父scope中的属性传递给directive的scope怎么办呢？directive 在使用隔离 scope(新的作用域) 的时候，提供了三种方法同隔离之外的地方交互："@" 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。"&" 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。"=" 需要实现双向数据绑定的时候使用。（最常使用）
template模板
可以使一段html代码。
template: "helloworld",
也可以是一个实例函数：其中$element,是指使用此指令的元素，而$element,则实例的属性，它是一个由元素上所有的属性组成的集合（对象）

////////
template: function($element, $attrs){ 
   var _html = ""; 
   _html += "" +"hello "+ $attrs.title+""; //这里的title就是这个指令里的title属性。
   return _html; 
   } 
 }; 

同样有很明显的一个缺点，你也可以将整个template写得很复杂，但是，复杂的代码非常不易维护。并且你还得换行，得用字符串拼接每一行。过长的template建议使用templateUrl代替。
templateUrl模板
templateUrl为从指定地址获取模板内容。即你要在指令所在的容器中插入的一个.html文件。当使用templateUrl模板时，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，项目中对模板进行了缓存，是可取之处。如下
 

这里的id属性就是被设置在templateUrl上用的。这里的templateUrl类似于JSP中的include。有没有明白一点。
replace
是否用模板替换当前元素。true : 将指令标签替换成temple中定义的内容,页面上不会再有标签；false ：则插入当前元素内，即模板的内容包在标签内部。默认false。
transculde：
是否使用ng-transculde来包含html中指令包含的原有的内容，接收两个参数true/false。默认值为false；这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。当你开启transclude后，你就可以使用ng-transclude来指明了应该在什么地方放置transcluded内容。有些高阶的东西，用的不好就是bug。
link
可以简单理解为，当改自定义指令被angular 编译后，执行该方法。主要的三个参数$scope(当前指令内部作用域，和scope绑定有关), $element(指的是html中的指令标签的对象，可以理解成$（"directive对象"），类似jquery的选择器。), $attrs(指令元素的属性的集合)link在angular编译后执行link函数主要用于操作dom元素,给dom元素绑定事件和监听.
controller
同link的区别在于controller操作的是业务逻辑。所以通常使用的只有$scope参数。并且可以通过注入方式依赖其他模块。如下
controller: ["$scope", "$location","UrlConfigService", function ($scope, $location,UrlConfigService) {
    $scope.onActionClick = function (row, parentMethod) {
            //code
        };
}

compile
这个是在angular编译阶段执行的方法。compile在编译前执行，目的是负责把template（包括transclude所引用的）变成一个完整的DOM结构。
关于angular的编译过程这里给大家一个链接，可做了解。angular编译及生命周期
priority
多个指令设置在同一个元素上的执行优先级,执行顺序从低高:1>2>3；priority的值为正整数，比如priority: 1,
ngHello的优先级肯定要高于ngWorld，不过实际中没人这么用，这里只做讲解。
angular.module("MetronicApp").directive("ngHello",function(){ 
 return{ 
  restrict: "EA",
  priority: 1,
  link : function(){
   //code
  }   
 }; 
})

angular.module("MetronicApp").directive("ngWorld",function(){ 
 return{ 
  restrict: "EA",
  priority: 2,
  link : function(){
   //code
  }   
 }; 
})


terminal
两个参数true/false 如果为true,本指令的优先级高于同一个元素上的其他指令，其他指令将停止执行。同样实际中不使用，只做了解。
angular.module("MetronicApp").directive("ngBook",function(){ 
 return{ 
  restrict: "EA",
  priority: 3,
  terninal: true, //这里为true,ngHello和ngWorld都将停止执行
  link : function(){
   //code
  }   
 }; 
})

指令的部分先介绍到这，如果在今后的实践中有发现不足和缺失再继续完善。此篇是让大家对指令有个规范了解。在项目中方便理解指令用法。例如table列表带分页（ng-table），查询列表（ng-tableinput） 展示列表（ng-list）（industry-field） 。也方便在今后自己封装，拆分一些公共功能模块。           
               
                                           
                       
                 
            
                     
                 
                                                                                                                    
                         云服务器
                                             
                         GPU云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               AngularJS
                                                                                                           六钟头
                                                                                                           六十行
                                                                                                           六点网络
                                                         
                 
               
              
             
               
                    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   转载请注明本文地址：https://www.ucloud.cn/yun/92715.html
               
                      
               
                 
                                  上一篇：AngularJs功能（七）--服务  
                                                
                                       下一篇：【Amaple教程】5. 插件
                                  
              
              
                相关文章
                
                             
                                                                                                    
                                                
                          关于Angularjs中自定义指令一些有价值的细节和技巧
                                                     摘要：属性为时，指示优先级小于当前指令的指令都不执行，仅执行到本指令。

作者：心叶时间：2018-04-22 10:58
一：自定义指令常用模板
下面是大致的说明，不是全面的，后面来具体说明一些没有提及的细节和重要的相关知识：
angular.module(yelloxingApp, []).directive(uiDirective, function() {

    return {
...
                                                   
                          
                                
                                    Markxu
                                    2019-08-22 16:35
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                       
                                                
                          AngularJS简述
                                                     流行框架
简介

angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简
无论是angularjs还是jQuery都是用原生JS封装的
库：对代码进行封装，调用封装的方法，简化操作
传统方式是用get方式获取元素，然后点方法
jQuery库实现了对获取方式的封装，对方法的封装
框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...
                                                   
                          
                                
                                    Jason
                                    2019-08-23 11:25
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                       
                                                
                          AngularJs 入门（一）--前言
                                                     摘要：入门一前言目前来说相对于现在流行的高版本以及来说实属是老套的前端框架了，当然这都不重要，没有完美的框架，只有不断优化的代码。通过使用我们称为指令的结构，让浏览器能够识别新的语法。使用作为输入，而不是字符串，是区别于其它的框架的最大原因。

AngularJs 入门（一）
前言

AngularJs目前来说相对于现在流行的高版本ng2、ng4,以及Vue2.0、React来说实属是老套的前...
                                                   
                          
                                
                                    wenyiweb
                                    2019-08-22 13:50
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                           
                
              
              
               
                  
                  发表评论
                   
                                      
                      
                        登陆后可评论
                                         
               
              
                
                  0条评论   
                 
                      
              
           
           
               
                
                    
                    Mertens
                    男|高级讲师
                    
                     
                                                                      我要关注
      
                                                                                        我要私信
                     
                                            
                    
                    
                          TA的文章
                          阅读更多
                    
                      
                                                  使用tensorflow
                            阅读 2989·2023-04-26 00:26
                                                       tensorflow框架
                            阅读 3587·2023-04-25 14:30
                                                       趣味Python题目10月8日
                            阅读 3458·2021-10-09 09:44
                                                       自学大数据前，零基础，三个月，找到一份测试工作
                            阅读 3750·2021-09-28 09:35
                                                       虚拟主机怎么搭建云免-虚拟主机怎么弄成云电脑啊？
                            阅读 1964·2021-09-22 16:02
                                                       微软宣布Windows Server 2022全面上市
                            阅读 1352·2021-09-03 10:30
                                                       面试之旅-深圳 遇到的问题和一些自己的拓展以及答案1
                            阅读 3291·2019-08-30 15:53
                                                       css3+less随机动画总结
                            阅读 2232·2019-08-30 14:07
                                                
                      
                

                   
              
  
                  最新活动 
           
         
                    
                      
                                                                                                                       
                          
                                                             
                          
                        
                                                
                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                                        
              



                                              
           
        
       
    
    
     
      
    
    
    
    
       
       
         阅读需要支付1元查看  
         支付并查看