Angular1.x自定义指令实例详解


Posted in Javascript onMarch 01, 2017

本文实例讲述了Angular1.x自定义指令。分享给大家供大家参考,具体如下:

调用Module.directive方法,传入指令名称和工厂函数,返回一个对象。

指令名称中每个大写字母会被认为是属性名中的一个独立的词,而每个词之间是以一个连字符分隔的。

var myApp = angular.module('myApp', [])
  .directive("unorderedList", function () {
    return function(scope, element, attrs) {
    };
  });

返回链式函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Demo</title>
  <link rel="stylesheet" href="../css/bootstrap.css" rel="external nofollow" />
  <link rel="stylesheet" href="../css/bootstrap-theme.css" rel="external nofollow" >
  <script src="../js/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3>Products</h3>
    </div>
    <div class="panel-body">
      <div unordered-list="products"></div>
    </div>
  </div>
</body>
<script>
var myApp = angular.module('myApp', [])
  .controller('myCtrl', ["$scope", 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 }
    ];
  }])
  .directive("unorderedList", function () {
    return function (scope, element, attrs) {
      var data = scope[attrs['unorderedList']];
      if( angular.isArray(data) ){
        for(var i=0, len=data.length; i<len; i++){
          console.log(data[i].name);
        }
      }
    };
  });
</script>
</html>

打破对数据属性的依赖

设置一个元素属性,用来动态第设置需要参加运算的键。如果属性名是以data-为前缀的,AngularJS会在生成传给连接函数的属性集合时移除这一前缀。也就是说data-list-property和list-property都会被表示为listProperty。

<div unordered-list="products" list-property="name"></div>
var data = scope[attrs['unorderedList']];
var propertyName = attrs['listProperty'];
if(angular.isArray(data)){
  var listElem = angular.element("<ul>");
  element.append(listElem);
  for(var i=0, len=data.length; i<len; i++){
    listElem.append( angular.element('<li>').text(data[i][propertyName]) );
  }
}

计算表达式

<div unordered-list="products" list-property="price | currency"></div>

添加过滤器后,自定义指令被破坏了。可以让作用域将属性值当做一个表达式进行计算。scope.$eval()接收两个参数:要计算的表达式和需要用于执行该计算的任意本地数据。

listElem.append( angular.element('<li>').text(scope.$eval(propertyName, data[i])) );

处理数据变化

<div class="panel-body">
  <button class="btn btn-primary" ng-click="incrementPrices()">
    Change Prices
  </button>
</div>
$scope.incrementPrices = function () {
  for(var i=0,len = $scope.products.length; i<len; i++){
    $scope.products[i].price++;
  }
}

添加监听器

if(angular.isArray(data)){
  var listElem = angular.element("<ul>");
  element.append(listElem);
  for(var i=0, len=data.length; i<len; i++){
    var itemElem = angular.element('<li>');
    listElem.append(itemElem);
    var watchFn = function (watchScope) {
      return watchScope.$eval(propertyName, data[i]);
    };
    scope.$watch(watchFn, function (newValue, oldValue) {
      itemElem.text(newValue);
    });
  }
}

第一个函数(监听器函数)基于作用域中的数据计算出一个值,该函数在每次作用域发生变化时都会被调用。如果该函数的返回值发生了变化,处理函数就会被调用,这个过程就像字符串表达式方式一样。提供一个函数来监听,能够从容地面对表达式中有可能带有过滤器的数据值得情形。

第二个监听器函数是针对$eval()计算的表达变化,来执行回调函数的。

以上代码并不能正确显示,涉及到for循环闭包问题。

for(var i=0, len=data.length; i<len; i++){
  (function () {
    var itemElem = angular.element('<li>');
    listElem.append(itemElem);
    var index = i;
    var watchFn = function (watchScope) {
      return watchScope.$eval(propertyName, data[index]);
    };
    scope.$watch(watchFn, function (newValue, oldValue) {
      itemElem.text(newValue);
    });
  }());
}

或者

(function (i) {
  var itemElem = angular.element('<li>');
  listElem.append(itemElem);
  var watchFn = function (watchScope) {
    return watchScope.$eval(propertyName, data[i]);
  };
  scope.$watch(watchFn, function (newValue, oldValue) {
    itemElem.text(newValue);
  });
})(i);

jqLite

jqLite中element()append()等方法的参数是HTML string or DOMElement。

return function (scope, element, attrs) {
  var listElem = element.append("<ol>");
  for (var i = 0; i < scope.names.length; i++) {
    listElem.append("<li>").append("<span>").text(scope.names[i]);
  }
}

上述添加的是字符串,最后添加只有scope.names中最后一条信息。

return function (scope, element, attrs) {
  var listElem = angular.element("<ol>");
  element.append(listElem);
  for (var i = 0; i < scope.names.length; i++) {
    listElem.append(angular.element("<li>")
        .append(angular.element("<span>").text(scope.names[i])));
  }
}

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
js资料toString 方法
Mar 13 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
轻松学习Javascript闭包
Mar 01 #Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 #Javascript
node.js实现回调的方法示例
Mar 01 #Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 #Javascript
Angular2库初探
Mar 01 #Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 #Javascript
JavaScript两个变量交换值的实现方法
Mar 01 #Javascript
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
php字符串操作常见问题小结
2016/10/11 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
儿童编程python入门
2018/05/08 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python 伯努利分布详解
2020/02/25 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
岗位职责的含义
2013/11/17 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
三年级评语大全
2014/04/23 职场文书
法制教育演讲稿
2014/09/10 职场文书
公司租房协议书
2014/10/14 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python