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 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
php接口数据加密、解密、验证签名
2015/03/12 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
详解Python 最短匹配模式
2020/07/29 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
历史学专业毕业生求职信
2013/09/27 职场文书
学校经典推荐信
2013/10/30 职场文书
推荐信范文大全
2015/03/27 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
z-index不起作用
2021/03/31 HTML / CSS
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python