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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 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 简单数组排序实现代码
2009/08/05 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
js 两数组去除重复数值的实例
2017/12/06 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python和JavaScript哪个容易上手
2020/06/23 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
GWT都有什么特性
2016/12/02 面试题
文员个人求职自荐信
2013/09/21 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
医药销售求职信范文
2014/02/01 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
初中英语演讲稿
2014/04/29 职场文书
违纪学生保证书
2015/02/27 职场文书
初中政治教师教学反思
2016/02/23 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
如何用Python搭建gRPC服务
2021/06/30 Python