本文实例讲述了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="../js/angular.js"></script></head><body ng-app="myApp" ng-controller="myCtrl"> <div class="panel panel-default"> <div class="panel-heading"> <h3>Products</h3> </div> <div class="panel-body"> <div unordered-list="products"></div> </div> </div></body><script>var myApp = 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 () { return function (scope, element, attrs) { var data = scope[attrs['unorderedList']]; if( angular.isArray(data) ){ for(var i=0, len=data.length; i<len; i++){ console.log(data[i].name); } } }; });</script></html>打破对数据属性的依赖
设置一个元素属性，用来动态第设置需要参加运算的键。如果属性名是以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()接收两个参数：要计算的表达式和需要用于执行该计算的任意本地数据。
新闻热点
疑难解答
图片精选
