AngularJS优雅的自定义指令

前端技术 2023/09/09 JavaScript

学习要点
 •为什么使用指令
 •创建自定义指令
•使用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标签，该标签的作用是：通过作用域数据模型的值，将其值以无序列表的方式展示出来
第三部：并且在单击加价按钮时，无序列表的值会依次递增

三、使用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找出，并且更加值的不同赋给字体不同的颜色
第三步：在视图中调用并且使用指令

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/23577

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案