angularJS 中$attrs方法使用指南
这里给大家分享的是一个angularJS中$attrs方法的使用示例:
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title> 无标题文档 </title> <scriptsrc="http://localhost:81/js/jquery.js"> </script> <scriptsrc="http://localhost:81/js/angular.min.js"> </script> </head> <bodyng-app="Demo"> <diva> a_directive </div> <divng-controller="TestCtrl"> <h1t> 原始内容 </h1> <h2t2> 原始内容 </h2> <h3t3="hiphop"title2="{{name}}"> 原始内容 </h3> <divcompile></div> <div> <testa="{{a}}"bc="xxx"></test> <buttonng-click="a=a+1"> 修改 </button> </div> <tea="1"ys-a="123"ng-click="show(1)">这里</te> </div> <script> varapp=angular.module('Demo',[],angular.noop); app.controller("TestCtrl", function($scope){ $scope.name="qihao"; }); app.directive("t", function(){ return{ controller:function($scope){$scope.name="qq"}, template:"<div>test:implementToParent{{name}}</div>", replace:true, scope:true //作用域是继承的,默认就是继承的 } }); app.directive("t2", function(){ return{ controller:function($scope){$scope.name="nono"}, template:"<div>test:implementToParent{{name}}</div>", replace:true, restrict:"AE" } }); app.directive("t3", function(){ return{ template:"<div>test:implementToParent_titleIs:{{title}}<br>title2Is:{{title2}}</div>", replace:true, restrict:"AE", scope:{ title:"@t3", title2:"@title2" } } }); app.directive('a', function(){ varfunc=function(){ console.log('compile'); returnfunction(){ console.log('link'); } } varcontroller=function($scope,$element,$attrs,$transclude){ //$transclude:是指令标签的复制体 console.log('controller'); console.log($scope); console.log($transclude); //$transclude接受两个参数,你可以对这个克隆的元素进行操作, varnode=$transclude(function(clone_element,scope){ $element.append(clone_element); $element.append("<span>spanTag___</span>"); console.log(clone_element); console.log('--'); console.log(scope); }); console.log(node); } return{ compile:func, template:"<h1ng-transclude></h1>", controller:controller, transclude:true, restrict:'AE' } }); app.directive('compile',function(){ varfunc=function(){ console.log('acompile'); return{ pre:function(){ console.log('alinkpre') }, post:function(){ console.log('alinkpost') }, } } return{ restrict:"AE", compile:func } }) app.directive('test',function(){ varfunc=function($element,$attrs){ console.log($attrs); $attrs.$observe('a',function(new_v){ console.log(new_v); }); } return{compile:func, restrict:'E'} }); app.controller('TestCtrl',function($scope){ $scope.a=123; }); app.directive('te',function(){ varfunc=function($scope,$element,$attrs,$ctrl){ console.log($ctrl) //$attrs.$set.给这个属性设置b,值为ooo,就是这样 $attrs.$set('b','ooo'); $attrs.$set('a-b','11'); //这个还有点不懂啊//第二个参数值 $attrs.$set('c-d','11',true,'c_d'); console.log($attrs); } return{ compile:function(){ returnfunc }, restrict:'E' } }); app.controller('TestCtrl',function($scope){ $scope.show=function(v){console.log(v);} }); </script> </body> </html>
本文内容就到这里了,希望大家能对angularJS中$attrs的使用有了新的认识,希望大家能够喜欢本文。