发表于: 2017-05-18 22:15:36
1 1117
今天完成的事情:了解了自定义指令,但是觉得有点不会用,还是自带的好.听老大讲了MVC结构在任务四中的运用,受益多多
明天计划的事情:把我的指令封装完成!
遇到的问题:暂无
收获:
angular 指令
1.背景介绍
AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。
2.知识剖析
angular指令分为:内置指令 && 自定义指令。
内置指令:AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-
自定义指令:除了 AngularJS 内置的指令外,我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令,HTML 元素上需要添加自定义指令名。
内置指令
ngular自带的指令,共有60个左右。
ngularJS提供了一系列内置指令。其中一些指令重载了原生的HTML元素,比如 form 和 a 标签,当在HTML中使用标签时,并不一定能明确看出是否在使用指令。例如, form 标签被从底层扩展了一系列高级功能,包括表单验证等,原生HTML表单并不会提供这些功能。其他内置指令通常以ng为前缀,很容易识别。所有以ng前缀开头作为命名空间的指令都是AngularJS提供的内置指令,因此不要把你自己开发的指令以这个前缀命名。
由于内置指令较多,本次只演示常用的几个内置指令。更多请参考
完整的angular API中文手册:http://www.angularjsapi.cn/#/form
常用的内置指令:
ng-app: 使用该指令自动启动一个AngularJS应用。ng-app指令指定的应用程序的根元素,通常放置在网页的根元素如body或html 标签。
ng-controller:定义应用的控制器对象。
ng-class: 指定 HTML 元素使用的 CSS 类
ng-click: 定义元素被点击时的行为
ng-model: 绑定 HTML 控制器的值到应用数据
ng-bind: 绑定 HTML 元素到应用程序数据
ng-repeat: 定义集合中每项数据的模板
可以去ppt中查看demo。
自定义指令
过AngularJS模块API中的.directive()方法,我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字,指令名应该是驼峰命名风格的,函数应该返回一个对象,包含了用来定义和配置指令所需的方法和属性。
<pre>
<code>
<demo-one></demo-one>
</code>
<code>
angular.module("myApp", [])
.controller('demoCtrl',function ($scope) {
$scope.aa='as111111'
})
.directive('demoOne',function () {
return{
restrict:"AECM",
template:'<input type="text" ng-model="aa">',
replace: true,
scope:{},
controller:['$scope',function ($scope) {
$scope.aa='ss1212'
}]
}
})
</code>
</pre>
restrict属性有4个值元素(E) 、属性(A) 、类(C)或注释(M)用以制定格式来调用,可以有不止一种格式,比如 restrict: 'EAC'。
replace的值决定它的模板是嵌套入标签中还是取而代之,若replace值为true,则显示的为
<a href="http://google.com">Click me to go to Google</a>
否则默认情况下, AngularJS将模板生成的HTML代码嵌套在自定义标签内部。
<my-directive>
<a href="http://google.com">Click me to go to Google</a>
</my-directive>
scope参数是自定义指令中比较重要的一个参数,一共有3个属性值:true && false && {}
第一种情况:scope:true
继承父作用域,并且新建独立作用域
第二种情况:scope:false
共享父作用域
第三种情况:scope:{}
不继承父作用域,创建新的独立作用域
3.常见问题
指令的优先级
ng-if和ng-show之间的区别
4.解决方案
优先级参数可以被设置为一个数值。大多数指令会忽略这个参数,使用默认值0,但也有些 场景设置高优先级是非常重要甚至是必须的。例如, ngRepeat将这个参数设置为1000,这样就可 以保证在同一元素上,它总是在其他指令之前被调用。
如果一个元素上具有两个优先级相同的指令,声明在前面的那个会被优先调用。如果其中一 个的优先级更高,则不管声明的顺序如何都会被优先调用:具有更高优先级的指令总是优先运行。
5.编码实战
6.扩展思考
自定义指令中,作用域之间的数据交互是怎么样的?
修饰符'@' '=' '&'的用法
”=“:指令中的属性取值为controller中相应$scope上属性的取值,可用于双向数据的绑定
”@“:指令中的取值为html中的字面量/直接量;建立一个local scope property到DOM属性的绑定。
”&“:指令中的取值为Contoller中相应$scope上的属性。可是这属性必须为一个函数回调
评论