AngularJs中的directive(一)
angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; }) restrict类型:(字符串)可选参数 取值有:
template类型:(字符串或者函数)可选参数 var myModule = angular.module("MyModule",[]); myModule.directive("hello",function() { return { restrict: 'AEMC',template: '<div>Hi everyone!</div>',replace: true } }); HTML代码为: angular.module("app",[]).directive("directitle",function(){ return{ restrict:'EAC',template: function(tElement,tAttrs){ var _html = ''; _html += '<div>'+tAttrs.title+'</div>'; return _html; } }; }) HTML代码为: templateUrl类型:(字符串或者函数),可选参数
var myModule = angular.module("MyModule",[]); }]) myModule.directive("hello",function() { return { restrict: 'AECM',templateUrl: 'hello-tpl.html',replace: true } }); 注意:在本地开发时候,需要运行一个服务器,不然使用templateUrl会报错 templateCache由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板。 var myModule = angular.module("MyModule",[]); //注射器加载完所有模块时,此方法执行一次 myModule.run(function($templateCache){ //使用内置的方法缓存起来 $templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>"); }); myModule.directive("hello",function($templateCache) { return { restrict: 'AECM',//使用get方法获取 template: $templateCache.get("hello.html"),replace: true } }); replace类型:(布尔值),默认值为false 如果设置repace:true的话,就会隐藏掉对于指令命名的html标签 类似<hello></hello>如果replace设置为true的话,就会消失不显示。 var myModule = angular.module("MyModule",function() { return { restrict:"AE",template:"<div>Hello everyone!</div>",//可以嵌套,默认为false replace:true } }); HTML代码为: 渲染之后的代码: 对比下没有开启 transclude类型:(布尔值或者字符 如果设置了 var myModule = angular.module("MyModule",transclude:true,template:"<div>Hello everyone!<div ng-transclude></div></div>" } }); HTML代码为: <hello> <div>这里是指令内部的内容。</div> </hello> 注意:在一个指令的模板template上只能申明一个ng-transclude。 如果我们想把嵌入部分多次放入我们的模板中要怎么办?则可以在 link:function($scope,$element,$attrs,controller,$transclude){ // clone 参数就是用户输入进去的内容。 $transclude(function(clone){ // 进行其他操作。 }); } var app = angular.module('app',[]); app.directive('myLink',function(){ return { restrict:'EA',controller:function($scope,$transclude){ $transclude(function(clone){ var a = angular.element('<a>'); a.attr('href',$attrs.value); a.attr('target',$attrs.target); a.text(clone.text()); $element.append(a); }) } } }) HTML代码为: <div my-link value=" target="_blank">百度</div> transclude:'element' 和 transclude:true 的区别有时候我们要嵌入指令元素本身,而不仅仅是他的内容,这种情况下,我们需要使用 scope类型:可选参数,(布尔值或者对象)
为了让隔离作用域能读取父作用域的属性,产生了绑定策略: 使用@(@attr)来进行单向文本(字符串)绑定var app = angular.module('myApp',[]); app.controller('MainController',function(){}); app.directive('helloWorld',function(){ return { scope: {color:'@colorAttr'},//指明了隔离作用域中的属性color应该绑定到属性colorAttr restrict: 'AE',replace: true,template: '<p style="background-color:{{color}}">Hello World</p>' } }); HTML代码为: 这种办法只能单向,通过在运行的指令的那个html标签上设置 提示:如果绑定的隔离作用域属性名与元素的属性名相同,则可以采取缺省写法。 HTML代码为: <hello-world color="{{color}}"/></hello-world> js定义指令的片段: app.directive('helloWorld',function(){ return { scope: { color: '@' },... //配置的余下部分 } }); 使用=(=attr)进行双向绑定var app = angular.module('myApp',function(){ return { scope:{color:'='},restrict: 'AE',template: '<div style="background-color:{{color}}">Hello World<div><input type="text" ng-model="color"></div></div>' } }); HTML代码为: <input type="text" ng-model="color" placeholder="Enter a color"/> {{color}} <hello-world color='color'></hello-world> 使用&来调用父作用域中的函数var myModule = angular.module("MyModule",[]); myModule.controller('MyCtrl',['$scope',function($scope){ $scope.sayHello = function(name){ alert("Hello " + name); } }]) myModule.directive("greeting",function() { return { restrict:'AE',scope:{ greet:'&' },template:'<input type="text" ng-model="userName" /><br/>'+ '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>' } }); HTML代码为: <greeting greet="sayHello(name)"></greeting> 备注:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |