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 继承实例分析
Nov 04 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
vue如何进行动画的封装
Sep 26 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 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语法(3)
2006/10/09 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PDO::_construct讲解
2019/01/27 PHP
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
python文件路径操作方法总结
2020/12/21 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
幼儿园教师个人反思
2014/01/30 职场文书
音乐教学案例
2014/01/30 职场文书
教师远程培训感言
2014/03/06 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2015年行政部工作总结
2015/04/28 职场文书
第一书记观后感
2015/06/08 职场文书
同学会感言
2015/07/30 职场文书
小学思想品德教学反思
2016/02/24 职场文书
公司与个人合作协议书
2016/03/19 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL