AngularJs功能(六)--指令

前端之家收集整理的这篇文章主要介绍了AngularJs功能(六)--指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

指令 Directive

指令系统(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
用于为你的应用添加控制器。
<element ng-controller="expression"></element>//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令其生效。
<input ng-disabled="expression"></input>//expression 如果表达式返回true,则设置为元素添加 disabled 属性
7、ng-readonly
设置表单输入字段设为只读。
可以通过表达式返回值true/false将表单输入字段设为只读。
8、ng-checked
设置是否选中复选框。
其中 ng-true-value="''" ng-false-value="''",可用来设置选中时或不选中时对应的值
9、ng-selected
用于设置 <select> 列表中的 <option> 元素的 selected 属性
ng-selected 属性的表达式返回 true 则选项被选中。
10、ng-show/ng-hide
根据表达式显示/隐藏HTML元素,注意是隐藏,不是从DOM移除(ng-if才是移除)
对于大对象的DOM,可以用它,但如果是小对象的DOM,建议使用ng-if
11、ng-change
ng-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-cloak
ng-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-switch
ngSwitch指令包含ng-switch-when、ng-switch-default功能类似switch,
ng-switch-when指条件条件符合将显示这个dom元素,
ng-switch-default指条件都不符合默认显示的元素。
17、ng-repeat
遍历集合(数组),给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下
<ul ng-repeat="user in data"><ul>
$index : 表示当前item的索引,$first : 如果item为第一个,那么$first为true,$middle : 如果item不是开头,不是结尾$middle为true,$last : 如果item是最后一个,  $last为true,$even : 如果索引为偶数, 那么$even为true,否则为false
$odd : 同上, 索引为奇数$odd为true....;
18、ng-src
指令覆盖了 <img> 元素的 src 属性
如果你使用了 AngularJS 代码设置图片地址,请使用 ng-src 指令替代 src 属性
ng-src 指令确保的 AngularJS 代码执行前不显示图片
界面加载的时候才不管img的标签src有什么
都会一并加载
如果图片的src包含了{{ **}}这些字符
浏览器不会管这是什么东西
在渲染dom树的时候
会直接请求这个地址
angular框架是在DOMcontent加载完毕后才开始发挥作用。
假如我们模板中有一张图片如下:
<img src=" http://m.cnblogs.com/142260/”{{imgUrl}}” />
  那么在页面开始加载到ng编译完成之前,页面上会一直显示一张错误图片,因为路径{{imgUrl}}还未被替换。
为了避免这种情况,我们使用ng-src指令,这样在路径被正确得到之前就不会显示找不到图片。同理,a标签的href属性也需要换成ng-href,这样页面上就不会先出现一个地址错误链接

19、ng-href
覆盖了原生的 a 元素 href 属性
如果在 href 的值中有 AngularJS 代码,则需要使用 ng-href 而不是 href。
ng-href 指令确保了链接是正常的,即使在 AngularJS 执行代码前点击链接

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

//
$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(",")的数组才是实际的model
ng-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> 标签用于描述文档或文档某个部分的细节。
(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: '<div>hello<span>world</span></div>',  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(元素):<directiveName></directiveName>
A(属性):<div directiveName='expression'></div>
C(类): <div class='directiveName'></div>
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: '<div>hello<span>world</span></div>',

也可以是一个实例函数
其中$element,是指使用此指令的元素,而$element,则实例的属性,它是一个由元素上所有的属性组成的集合(对象)

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

同样有很明显的一个缺点,你也可以将整个template写得很复杂,但是,复杂的代码非常不易维护。并且你还得换行,得用字符串拼接每一行。过长的template建议使用templateUrl代替。

templateUrl模板

templateUrl为从指定地址获取模板内容。即你要在指令所在的容器中插入的一个.html文件
当使用templateUrl模板时,需要运行一个服务器,不然使用templateUrl会报错 Cross Origin Request Script(CORS)错误
由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,项目中对模板进行了缓存,是可取之处。如下

<script type='text/ng-template' id='directive.html'> 
   <div>
     <h1>Hello World</h1>
     <div>{{name}}</div>
   </div> 
</script>

这里的id属性就是被设置在templateUrl上用的。
这里的templateUrl类似于JSP中的include。有没有明白一点。

replace

是否用模板替换当前元素。
true : 将指令标签替换成temple中定义的内容,页面上不会再有<directive-name>标签
false :则插入当前元素内,即模板的内容包在<directive-name>标签内部。默认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",priority: 2,link : function(){
   //code
  }   
 }; 
})
terminal

两个参数true/false 如果为true,本指令的优先级高于同一个元素上的其他指令,其他指令将停止执行。同样实际中不使用,只做了解。

angular.module("MetronicApp").directive("ngBook",priority: 3,terninal: true,//这里为true,ngHello和ngWorld都将停止执行
  link : function(){
   //code
  }   
 }; 
})

指令的部分先介绍到这,如果在今后的实践中有发现不足和缺失再继续完善。此篇是让大家对指令有个规范了解。在项目中方便理解指令用法。例如table列表带分页(ng-table),查询列表(ng-tableinput) 展示列表(ng-list)(industry-field) 。也方便在今后自己封装,拆分一些公共功能模块。

猜你在找的Angularjs相关文章