发表于: 2017-05-14 23:43:53
0 922
今天完成的事情:
今天看书学习了AngularJS自定义指令部分的内容。
查看了师兄给的有微钱项目的代码,但正如相博所说,内容太多,找不到重点,看了收获不大。
就像是面对一个金矿,却没有带挖矿工具。
明天计划的事情:
做出任务8要求的分页和搜索框,
遇到的问题:
暂无
收获:
指令是扩展扩展具有自定义功能的HTML元素的途径。比如为 DOM 元素调用方法、定义行为绑定数据等。本质上是在HTML中通过元素、属性、类或注释来添加功能。
指令主要分为两种:内置指令和自定义指令。假设我们已经创建了一个完整的HTML文档,其中包含了AngularJS,并且DOM中已经用ng-app指令标识出了应用的根元素,当AngularJS编译HTML时就会调用指令。
通过AngularJS模块API中的.directive()方法,我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字,指令名应该是驼峰命名风格的,函数应该返回一个对象,包含了用来定义和配置指令所需的方法和属性。
<my-directive></my-directive>
<script>
angular.module('myApp',[])
.directive('myDirective', function() {
return {
restrict: 'E',
replace:true,
template: '<a href="http://google.com">Click me to go to Google</a>'
};
});
</script>
restrict属性有4个值元素(E) 、属性(A) 、类(C)或注释(M)用以制定格式来调用,可以有不止一种格式,比如 restrict: 'EAC'。
var mainDirectives = angular.module('mainDirectives',[])
.directive('jobfocus1',function () {
return {
restrict: 'AE', //调用方式
replace: true, //调用时是否替换调用标签,还是在嵌入内部
templateUrl: '../tpls/focus/jobcarot2.html', //模板路径
scope: {}, //是否生成独立作用域
controller: function ($scope, $element, $attrs, $transclude) {
共用的方法,参数
如果存在多个指令交互,这个就可以作为主指令,其他指令需要操作到的函数或方法就在这里调用,
也就在link函数的supermanCtrl参数中调用
}
link:function (scope, ele, attrs,supermanCtrl){
函数参数:
scope:当前作用域对象
ele:当前元素
attrs:当前元素的属性
supermanCtrl:是否存在
指令逻辑,在这里操作dome,
}
}
})
scope参数是可选的,可以被设置为true或一个对象。默认值是false。
当为true时:继承并隔离,父子作用域互相影响
当为false时:继承但是不隔离,也就是说子作用域改变并不会影响父作用域
当为{}时:隔离且不继承
评论