本文实例讲述了Angular1.x自定义指令。分享给大家供大家参考，具体如下：
调用Module.directive方法，传入指令名称和工厂函数，返回一个对象。
指令名称中每个大写字母会被认为是属性名中的一个独立的词，而每个词之间是以一个连字符分隔的。
var myApp = angular.module('myApp', [])
.directive("unorderedList", function () {
return function(scope, element, attrs) {
};
});
返回链式函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS Demo</title> <link rel="stylesheet" href="../css/bootstrap.css" rel="external nofollow" /> <link rel="stylesheet" href="../css/bootstrap-theme.css" rel="external nofollow" > <script src="/UploadFiles/2021-04-02/angular.js">打破对数据属性的依赖
设置一个元素属性，用来动态第设置需要参加运算的键。如果属性名是以data-为前缀的，AngularJS会在生成传给连接函数的属性集合时移除这一前缀。也就是说data-list-property和list-property都会被表示为listProperty。
<div unordered-list="products" list-property="name"></div>var data = scope[attrs['unorderedList']]; var propertyName = attrs['listProperty']; if(angular.isArray(data)){ var listElem = angular.element("<ul>"); element.append(listElem); for(var i=0, len=data.length; i<len; i++){ listElem.append( angular.element('<li>').text(data[i][propertyName]) ); } }计算表达式
<div unordered-list="products" list-property="price | currency"></div>添加过滤器后，自定义指令被破坏了。可以让作用域将属性值当做一个表达式进行计算。scope.$eval()接收两个参数：要计算的表达式和需要用于执行该计算的任意本地数据。
listElem.append( angular.element('<li>').text(scope.$eval(propertyName, data[i])) );处理数据变化
<div class="panel-body"> <button class="btn btn-primary" ng-click="incrementPrices()"> Change Prices </button> </div>$scope.incrementPrices = function () { for(var i=0,len = $scope.products.length; i<len; i++){ $scope.products[i].price++; } }添加监听器
if(angular.isArray(data)){ var listElem = angular.element("<ul>"); element.append(listElem); for(var i=0, len=data.length; i<len; i++){ var itemElem = angular.element('<li>'); listElem.append(itemElem); var watchFn = function (watchScope) { return watchScope.$eval(propertyName, data[i]); }; scope.$watch(watchFn, function (newValue, oldValue) { itemElem.text(newValue); }); } }第一个函数(监听器函数)基于作用域中的数据计算出一个值，该函数在每次作用域发生变化时都会被调用。如果该函数的返回值发生了变化，处理函数就会被调用，这个过程就像字符串表达式方式一样。提供一个函数来监听，能够从容地面对表达式中有可能带有过滤器的数据值得情形。
第二个监听器函数是针对
$eval()计算的表达变化，来执行回调函数的。以上代码并不能正确显示，涉及到for循环闭包问题。
for(var i=0, len=data.length; i<len; i++){ (function () { var itemElem = angular.element('<li>'); listElem.append(itemElem); var index = i; var watchFn = function (watchScope) { return watchScope.$eval(propertyName, data[index]); }; scope.$watch(watchFn, function (newValue, oldValue) { itemElem.text(newValue); }); }()); }或者
(function (i) { var itemElem = angular.element('<li>'); listElem.append(itemElem); var watchFn = function (watchScope) { return watchScope.$eval(propertyName, data[i]); }; scope.$watch(watchFn, function (newValue, oldValue) { itemElem.text(newValue); }); })(i);jqLite
jqLite中
element()、append()等方法的参数是HTML string or DOMElement。return function (scope, element, attrs) { var listElem = element.append("<ol>"); for (var i = 0; i < scope.names.length; i++) { listElem.append("<li>").append("<span>").text(scope.names[i]); } }上述添加的是字符串，最后添加只有scope.names中最后一条信息。
return function (scope, element, attrs) { var listElem = angular.element("<ol>"); element.append(listElem); for (var i = 0; i < scope.names.length; i++) { listElem.append(angular.element("<li>") .append(angular.element("<span>").text(scope.names[i]))); } }更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！