Angular1.x自定义指令实例详解
本文实例讲述了Angular1.x自定义指令。分享给大家供大家参考,具体如下:
调用Module.directive方法,传入指令名称和工厂函数,返回一个对象。
指令名称中每个大写字母会被认为是属性名中的一个独立的词,而每个词之间是以一个连字符分隔的。
varmyApp=angular.module('myApp',[]) .directive("unorderedList",function(){ returnfunction(scope,element,attrs){ }; });
返回链式函数
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>AngularJSDemo</title> <linkrel="stylesheet"href="../css/bootstrap.css"rel="externalnofollow"/> <linkrel="stylesheet"href="../css/bootstrap-theme.css"rel="externalnofollow"> <scriptsrc="../js/angular.js"></script> </head> <bodyng-app="myApp"ng-controller="myCtrl"> <divclass="panelpanel-default"> <divclass="panel-heading"> <h3>Products</h3> </div> <divclass="panel-body"> <divunordered-list="products"></div> </div> </div> </body> <script> varmyApp=angular.module('myApp',[]) .controller('myCtrl',["$scope",function($scope){ $scope.products=[ {name:"Apples",category:"Fruit",price:1.20,expiry:10}, {name:"Bananas",category:"Fruit",price:2.42,expiry:7}, {name:"Pears",category:"Fruit",price:2.02,expiry:6} ]; }]) .directive("unorderedList",function(){ returnfunction(scope,element,attrs){ vardata=scope[attrs['unorderedList']]; if(angular.isArray(data)){ for(vari=0,len=data.length;i<len;i++){ console.log(data[i].name); } } }; }); </script> </html>
打破对数据属性的依赖
设置一个元素属性,用来动态第设置需要参加运算的键。如果属性名是以data-为前缀的,AngularJS会在生成传给连接函数的属性集合时移除这一前缀。也就是说data-list-property和list-property都会被表示为listProperty。
<divunordered-list="products"list-property="name"></div>
vardata=scope[attrs['unorderedList']]; varpropertyName=attrs['listProperty']; if(angular.isArray(data)){ varlistElem=angular.element("<ul>"); element.append(listElem); for(vari=0,len=data.length;i<len;i++){ listElem.append(angular.element('<li>').text(data[i][propertyName])); } }
计算表达式
<divunordered-list="products"list-property="price|currency"></div>
添加过滤器后,自定义指令被破坏了。可以让作用域将属性值当做一个表达式进行计算。scope.$eval()接收两个参数:要计算的表达式和需要用于执行该计算的任意本地数据。
listElem.append(angular.element('<li>').text(scope.$eval(propertyName,data[i])));
处理数据变化
<divclass="panel-body"> <buttonclass="btnbtn-primary"ng-click="incrementPrices()"> ChangePrices </button> </div>
$scope.incrementPrices=function(){ for(vari=0,len=$scope.products.length;i<len;i++){ $scope.products[i].price++; } }
添加监听器
if(angular.isArray(data)){ varlistElem=angular.element("<ul>"); element.append(listElem); for(vari=0,len=data.length;i<len;i++){ varitemElem=angular.element('<li>'); listElem.append(itemElem); varwatchFn=function(watchScope){ returnwatchScope.$eval(propertyName,data[i]); }; scope.$watch(watchFn,function(newValue,oldValue){ itemElem.text(newValue); }); } }
第一个函数(监听器函数)基于作用域中的数据计算出一个值,该函数在每次作用域发生变化时都会被调用。如果该函数的返回值发生了变化,处理函数就会被调用,这个过程就像字符串表达式方式一样。提供一个函数来监听,能够从容地面对表达式中有可能带有过滤器的数据值得情形。
第二个监听器函数是针对$eval()计算的表达变化,来执行回调函数的。
以上代码并不能正确显示,涉及到for循环闭包问题。
for(vari=0,len=data.length;i<len;i++){ (function(){ varitemElem=angular.element('<li>'); listElem.append(itemElem); varindex=i; varwatchFn=function(watchScope){ returnwatchScope.$eval(propertyName,data[index]); }; scope.$watch(watchFn,function(newValue,oldValue){ itemElem.text(newValue); }); }()); }
或者
(function(i){ varitemElem=angular.element('<li>'); listElem.append(itemElem); varwatchFn=function(watchScope){ returnwatchScope.$eval(propertyName,data[i]); }; scope.$watch(watchFn,function(newValue,oldValue){ itemElem.text(newValue); }); })(i);
jqLite
jqLite中element()、append()等方法的参数是HTMLstringorDOMElement。
returnfunction(scope,element,attrs){ varlistElem=element.append("<ol>"); for(vari=0;i<scope.names.length;i++){ listElem.append("<li>").append("<span>").text(scope.names[i]); } }
上述添加的是字符串,最后添加只有scope.names中最后一条信息。
returnfunction(scope,element,attrs){ varlistElem=angular.element("<ol>"); element.append(listElem); for(vari=0;i<scope.names.length;i++){ listElem.append(angular.element("<li>") .append(angular.element("<span>").text(scope.names[i]))); } }
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。