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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
JS高级运动实例分析
Dec 20 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 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
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
python文件与目录操作实例详解
2016/02/22 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
python实现用户答题功能
2018/01/17 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
工程质量月活动方案
2014/02/19 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
上下班时间调整通知
2015/04/23 职场文书
埃及王子观后感
2015/06/16 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python