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字母大小写转换的4个函数详解
May 09 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
vuejs如何配置less
Apr 25 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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函数和特点
2013/08/08 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
从0开始学Vue
2016/10/27 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
python查找第k小元素代码分享
2013/12/18 Python
Python SQLite3数据库操作类分享
2014/06/10 Python
python3简单实现微信爬虫
2015/04/09 Python
Python GUI编程完整示例
2019/04/04 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
解决django FileFIELD的编码问题
2020/03/30 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
2019年.net常见面试问题
2012/02/12 面试题
党员公开承诺书
2014/03/25 职场文书
装修施工安全责任书
2014/07/24 职场文书
司机岗位职责说明书
2014/07/29 职场文书
学校会议通知范文
2015/04/15 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书