一、指令的职责
指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法。
二、创建自定义指令
调用自定义指令的4种方式:元素、属性、样式类、注释.
常用的是前两种,实例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body ng-app="myApp" > <hello></hello><!--E元素--> <div hello></div><!--A属性--> <div class="hello"></div><!--C样式类--> <!--directive:hello--> </body> <script type="text/javascript" src="js/angular.js" ></script> <script type="text/javascript" src="js/directive.js" ></script> </html>
js代码:
var app = angular.module("myApp",[]); app.directive("hello",function(){ return { restrict: 'AECM', template:'<div>Hi everyone</div>',//模板 //templateUrl:'index.html', replace: true } });
测试结果只有3条内容,没有显示采用注释的方法调用指令的结果.不过常用的还是使用属性和元素的方式来调用指令.
三、指令定义中用到的其他字段
1.templateUrl
模板的显示还可以使用templateUrl属性来调用html文件中的DOM元素.
如果其他指令也要使用同一个模板,可以利用AngularJs中的$templateCache属性将模板缓存起来然后再调用:
用到angular中的run方法,它只会执行一次.
js文件:
var app = angular.module("myApp",[]); //app.directive("hello",function(){ // return { // restrict: 'AECM', // template:'<div>Hi everyone</div>',//模板 // //templateUrl:'index.html', // replace: true // } //}); app.run(function($templateCache){ $templateCache.put("hello.html","<div>Hello,my name is yo</div>"); }); app.directive("hello",function($templateCache){ return { restrict: 'A', //template:'<div>Hi everyone</div>',//模板 template:$templateCache.get("hello.html"),//模板 //templateUrl:'index.html', replace: true } }); app.directive("hi",function($templateCache){ return { restrict: 'E', //template:'<div>Hi everyone</div>',//模板 template:$templateCache.get("hello.html"),//模板 //templateUrl:'index.html', replace: true } });
测试结果:
2.transclude:是否为指令模板或编译函数提供指令元素中的内容.
不加这个字段,在指令中添加模板会替换掉之前有的内容,transclude是很重要的一个字段,它可以让指令与指令之间相互嵌套.
js关键代码:
效果:
3. link:定义将指令与作用域连接起来的链接函数
a)控制器与指令的交互:
js文件:
var app = angular.module("myApp",[]); app.controller("myController",['$scope',function($scope){ $scope.loadData = function() { console.log("数据加载中..."); }; } ]); app.directive("loader",function($templateCache){ return { restrict: 'AE', link: function(scope,element,attr){ element.bind("mouseenter",function(){ scope.loadData(); }); } //template:'<div>Hi everyone</div>',//模板 //transclude: true, //template:"<div>Hi everyone<div ng-transclude></div></div>", //templateUrl:'index.html', } });
效果:
注:将scope.loadData();替换成scope.$apply("loadData()");可以达到同样的效果.
如果有多个controller指令的情况,如何调用方法?
采用用属性的方式来调用指令:
var app = angular.module("myApp",[]); app.controller("myController",['$scope',function($scope){ $scope.loadData = function() { console.log("数据加载中..."); }; } ]); app.controller("myController2",['$scope',function($scope){ $scope.loadData2 = function() { console.log("数据加载中aaaa..."); }; } ]); app.directive("loader",function($templateCache){ return { restrict: 'AE', link:function(scope,element,attrs){ element.bind("mouseenter",function(){ //scope.loadData(); scope.$apply(attrs.howtoload); }); } //template:'<div>Hi everyone</div>',//模板 //transclude: true, //template:"<div>Hi everyone<div ng-transclude></div></div>", //templateUrl:'index.html', } });
//b)指令与指令交互
var app = angular.module("myApp",[]); app.directive("superman",function() { return { scope: {},//创建独立作用域 restrict:'AE', controller: function($scope){//一个作为指令控制器的函数,相当于一个public方法,让外部去调用 $scope.abilities = []; this.addStrength = function(){ $scope.abilities.push("strength"); }; this.addSpeed = function(){ $scope.abilities.push("speed"); }; this.addLight = function(){ $scope.abilities.push("Light"); }; }, link: function(scope,element,attrs){//处理指令内部的元素 element.bind("mouseenter",function(){ console.log(scope.abilities); }); } } }); app.directive("strength",function(){ return { require:'^superman',//当前指令依赖superman link: function(scope,element,attrs,supermanCtrl){ supermanCtrl.addStrength(); } } }); app.directive("speed",function(){ return { require:'^superman',//当前指令依赖superman link: function(scope,element,attrs,supermanCtrl){ supermanCtrl.addSpeed(); } } }); app.directive("light",function(){ return { require:'^superman',//当前指令依赖superman link: function(scope,element,attrs,supermanCtrl){ supermanCtrl.addLight(); } } });
测试结果:
4.scope:为指令创建一个新的子作用域,还是创建一个独立作用域
实例:
var app = angular.module("myApp",[]); app.directive("hello",function(){ return { restrict:'AE', template:'<div><input type="text" ng-model="name">{{name}}</div>' } });
可以看到四个input的作用域不是独立的,改变其中一个input中的值,其他三个也会一起被改变.
添加scope后的结果:
scope的三种绑定:@ = &
实例:
js代码:
测试结果:
用scope代替link的写法:
1)@
模板中加一个表单:
var app = angular.module("myApp",[]); app.controller("MyCtrl",function($scope){ $scope.ctrlfriendname = "王宝强"; }); app.directive("hello",function(){ return { restrict:'AE', scope:{ friendname:'@' }, template:'<div><input type="text" ng-model="friendname">{{friendname}}</div>' // link: function(scope,element,attrs){ // scope.friendname=attrs.friendname; // } } });
测试结果:
改变表单中的值如下:
2)=
实例:
js文件:
测试结果:
3)&
实例:
js代码:
测试结果:
点击按钮:
总结:@是把当前属性作为字符串传递,=是与父scope中的属性进行双向绑定,&是传递来自父scope的一个函数,稍后调用。