AngularJS优雅的自定义指令  更新时间:2016年07月01日 14:29:40   作者:super_yang_android   这篇文章主要介绍了AngularJS优雅的自定义指令,告诉大家为什么使用AngularJS自定义指令,以及如何使用AngularJS自定义指令?感兴趣的小伙伴们可以参考一下 学习要点  •为什么使用指令  •创建自定义指令 •使用jqLite工作  一、为什么使用自定义指令 NG内置了许多自定义指令,但是它们有时并不能满足你的要求,这是需要我们创建自定义属性。 二、自定义指令 接下来,我们来做一个小案例,当鼠标单击加价后,列表项自动递增,当然列表也是通过指令自动添加的,它本就是一个空的div Angluar test Products 加价 解析: 第一步:创建控制器,添加数据模型products和递增价格incrementPrices()方法 第二步:自定义unorderlist标签,该标签的作用是:通过作用域数据模型的值,将其值以无序列表的方式展示出来 第三部:并且在单击加价按钮时,无序列表的值会依次递增 三、使用jqLite工作 NG内置了jqLite,它是JQuery的缩小版 Angluar test Apples Bananas Cherries Oranges Pears Oranges 解析: 第一步:自定义控制器,定义数据模型names 第二步:自定义指令,功能是将使用指令的元素下的所有li找出,并且更加值的不同赋给字体不同的颜色 第三步:在视图中调用并且使用指令 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: 深入讲解AngularJS中的自定义指令的使用 AngularJS创建自定义指令的方法详解 AngularJS使用自定义指令替代ng-repeat的方法 AngularJS 自定义指令详解及实例代码 AngularJS自定义指令实现面包屑功能完整实例 AngularJS实现自定义指令与控制器数据交互的方法示例 AngularJS 自定义指令详解及示例代码 AngularJS自定义指令之复制指令实现方法 AngularJS自定义指令详解(有分页插件代码) 详解angularJS自定义指令间的相互交互 AngularJS实现自定义指令及指令配置项的方法 AngularJS 指令 相关文章 AngularJS基于MVC的复杂操作实例讲解 下面小编就为大家分享一篇AngularJS基于MVC的复杂操作实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2017-12-12 AngularJS 与Bootstrap实现表格分页实例代码 这篇文章主要介绍了AngularJS 与Bootstrap实现表格分页的相关资料,并附实例代码和实现效果图,需要的朋友可以参考下 2016-10-10 Angular 如何使用第三方库的方法 本篇文章主要介绍了Angular 如何使用第三方库的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 angularJs中$scope数据序列化的实例 今天小编就为大家分享一篇angularJs中$scope数据序列化的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 AngularJS ng-mousedown 指令 本文主要介绍AngularJS ng-mousedown 指令,这里帮大家整理了ng-mousedown 指令的基本资料,并附代码示例,有需要的朋友可以参考下 2016-08-08 Angular 数据请求的实现方法 本篇文章主要介绍了Angular 数据请求的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 利用Jasmine对Angular进行单元测试的方法详解 单元测试是一种能够帮助开发者验证代码中某一部分有效性的技术。下面这篇文章主要给大家介绍了关于利用Jasmine对Angular进行单元测试的相关资料,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-06-06 AngularJS下$http服务Post方法传递json参数的实例 下面小编就为大家分享一篇AngularJS下$http服务Post方法传递json参数的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-03-03 详解Angular中的自定义服务Service、Provider以及Factory 本篇文章主要介绍了详解Angular中的自定义服务Service、Provider以及Factory,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-04-04 AngularJS中的模块详解 这篇文章主要介绍了AngularJS中的模块详解,本文给出了一个模块实例,需要的朋友可以参考下 2015-01-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标签,该标签的作用是:通过作用域数据模型的值,将其值以无序列表的方式展示出来
第三部:并且在单击加价按钮时,无序列表的值会依次递增

这里写图片描述

三、使用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中的自定义指令的使用
  • AngularJS创建自定义指令的方法详解
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS 自定义指令详解及实例代码
  • AngularJS自定义指令实现面包屑功能完整实例
  • AngularJS实现自定义指令与控制器数据交互的方法示例
  • AngularJS 自定义指令详解及示例代码
  • AngularJS自定义指令之复制指令实现方法
  • AngularJS自定义指令详解(有分页插件代码)
  • 详解angularJS自定义指令间的相互交互
  • AngularJS实现自定义指令及指令配置项的方法
张贴在3