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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
js+css3实现炫酷时钟
Aug 18 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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
跟我学Laravel之路由
2014/10/15 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
css图标制作教程制作云图标
2014/01/19 HTML / CSS
与UNIX有关的几个名词
2015/09/17 面试题
个人现实表现材料
2014/02/04 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
爱心倡议书范文
2014/05/12 职场文书
三八活动策划方案
2014/08/17 职场文书
七一建党节演讲稿
2014/09/11 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
如何用Python搭建gRPC服务
2021/06/30 Python