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的事件绑定(方便不支持js的时候)
Oct 01 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
JavaScript模块详解
Dec 18 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
5个实用的JavaScript新特性
Jun 16 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 如何向 MySQL 发送数据
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
Smarty变量用法详解
2016/05/11 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
js 事件小结 表格区别
2007/08/13 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python3大文件解压和基本操作
2017/12/15 Python
Python跳出多重循环的方法示例
2019/07/03 Python
学习和使用python的13个理由
2019/07/30 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
企业给企业的表扬信
2014/01/13 职场文书
委托书的写法
2014/08/30 职场文书
青年文明号申报材料
2014/12/23 职场文书
工作简历的自我评价
2019/05/16 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
详细了解MVC+proxy
2021/07/09 Java/Android