<script type="text/javascript" src="js/angular.min.js">

<script type="text/javascript">

angular.module("exampleApp",[])
.directive("unorderlist",function () {
// scope 作用域
// element 应用该指令的元素
// attrs 使用该指令的元素的属性
return function (scope,element,attrs) {
// attrs['unorderlist'] 获取unorderlist属性值，这里为products
// 获取数据模型值，这里为scope.products
var data = scope[attrs['unorderlist']];
// 创建一个

标签元素
var ul = angular.element("
");
// 在应用该指令的元素中添加

element.append(ul);
// 获取listProperty属性值，这里为price | currency
var expression = attrs['listProperty'];
// 判断是否为数组
if (angular.isArray(data)) {
// 遍历数据模型scope.products
for (var i = 0; i < data.length; i++) {
// 添加闭包,将i传递进去
(function (index) {
// 创建一个
• 标签元素
  var li = angular.element("
• ");
  // 将
• 标签添加到
  中
  ul.append(li);
  // 监听器函数，用$eval计算表达式和data[index]的值
  var watcherFn = function (watchScope) {
  return watchScope.$eval(expression,data[index]);
  }
  // 添加$watch监听器监听作用域的变化
  scope.$watch(watcherFn,function (newValue,oldValue) {
  // 更新li的值
  li.text(newValue);
  })
  })(i);
  }
  }
  }
  })
  .controller("defaultCtrl",function ($scope) {
  // 数据模型
  $scope.products = [
  { name: "Apples",category: "Fruit",price: 1.20,expiry: 10 },{ name: "Bananas",price: 2.42,expiry: 7 },{ name: "Pears",price: 2.02,expiry: 6 }
  ];
  // 递增价格
  $scope.incrementPrices = function () {
  for (var i = 0; i < $scope.products.length; i++) {
  $scope.products[i].price++;
  }
  }
  })