标签:
一、指令的职责
指令的职责是修改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:定义将指令与作用域连接起来的链接函数
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‘, } });
标签:
原文地址:http://www.cnblogs.com/yy95/p/5791421.html