AngularJS优雅的自定义指令


Posted in Javascript onJuly 01, 2016

学习要点
 •为什么使用指令
 •创建自定义指令
•使用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优雅的自定义指令

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 #Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 #Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 #Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 #Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 #Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 #Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 #Javascript
You might like
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python实现简单字典树的方法
2016/04/29 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
Python I/O与进程的详细讲解
2019/03/08 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
几款好用的python工具库(小结)
2020/10/20 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
婚假请假条怎么写
2014/04/10 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
二年级评语大全
2014/04/23 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书