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 Sort 表格排序
Oct 31 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
JavaScript函数详解
Feb 27 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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 4.2书写安全的脚本
2006/10/09 PHP
PHP Mysql编程之高级技巧
2008/08/27 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php微信开发之关注事件
2018/06/14 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Django自定义manage命令实例代码
2018/02/11 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python3 线性回归验证方法
2019/07/09 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
2014社区三八妇女节活动总结
2014/03/01 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
车队安全员岗位职责
2015/02/15 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA