AngularJS优雅的自定义指令

老卫的技术站

2016-07-01

学习要点
•为什么使用指令
•创建自定义指令
•使用jqLite工作

一、为什么使用自定义指令
NG内置了许多自定义指令，但是它们有时并不能满足你的要求，这是需要我们创建自定义属性。

二、自定义指令
接下来，我们来做一个小案例，当鼠标单击加价后，列表项自动递增，当然列表也是通过指令自动添加的，它本就是一个空的div

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel-heading">
       <h3>Products</h3>
    </div>
    <div class="panel-body">
      <!-- 点击加价，价格递增 -->
      <button type="button" class="btn btn-primary" ng-click="incrementPrices()">加价</button>
    </div>
    <div class="panel-body">
      <!-- 将products数据以一种无序列表的形式展示 -->
      <!-- list-property="price | currency" 列表项单位本地化 -->
      <div unorderlist="products" list-property="price | currency"></div>
    </div>
  </dlv>

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

<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']];
      // 创建一个<ul>标签元素
      var ul = angular.element("<ul>");
      // 在应用该指令的元素中添加<ul>
      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) {
            // 创建一个<li>标签元素
            var li = angular.element("<li>");
            // 将<li>标签添加到<ul>中
            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", category: "Fruit", price: 2.42, expiry: 7 },
      { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
    ];
    // 递增价格
    $scope.incrementPrices = function () {
      for (var i = 0; i < $scope.products.length; i++) {
        $scope.products[i].price++;
      }
    }
  })
</script>
</body>
</html>

解析：
第一步：创建控制器，添加数据模型products和递增价格incrementPrices()方法
第二步：自定义unorderlist标签，该标签的作用是：通过作用域数据模型的值，将其值以无序列表的方式展示出来
第三部：并且在单击加价按钮时，无序列表的值会依次递增

AngularJS优雅的自定义指令

三、使用jqLite工作
NG内置了jqLite，它是JQuery的缩小版

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
  <dlv class="panel panel-default">
    <!-- 使用自定义指令 -->
    <ol dome-directive>
      <li>Apples</li>
      <ul>
        <li>Bananas</li>
        <li>Cherries</li>
        <li>Oranges</li>
      </ul>
      <li>Pears</li>
      <li>Oranges</li>
    </ol>
  </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("exampleApp", [])
  .directive("domeDirective", function () {
    return function (scope, element, attrs) {
      // 找出element元素下所有的li,这里的element是调用者<ol>
      var items = element.find("li");
      // 要所有的li的font-weight为bold
      items.css("font-weight", "bold");
      // 遍历li, 值为Oranges的字体颜色为red,其余为green
      for (var i = 0; i < items.length; i++) {
        if (items.eq(i).text() == "Oranges"){
          items.eq(i).css("color", "red");
        } else {
          items.eq(i).css("color", "green");
        }
      }
      // 打印出li的长度和字体颜色
      console.log("Items length : " + items.length);
      console.log("Color: " + items.css("color"));
    }
  })
</script>
</body>
</html>

解析：
第一步：自定义控制器，定义数据模型names
第二步：自定义指令，功能是将使用指令的元素下的所有li找出，并且更加值的不同赋给字体不同的颜色
第三步：在视图中调用并且使用指令

AngularJS优雅的自定义指令