全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

Angular1.x自定义指令实例详解

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。


# Angular1.x  # 自定义指令  # 详解webpack+es6+angular1.x项目构建  # Angular1.x复杂指令实例详解  # AngularJS1.X学习笔记2-数据绑定详解  # Angular 1.x个人使用的经验小结  # 自定义  # 链式  # 的是  # 进阶  # 这一  # 就会  # 就像  # 相关内容  # 第一个  # 中有  # 会在  # 感兴趣  # 第二个  # 给大家  # 并不能  # 涉及到  # 更多关于  # 所述  # 回调  # 程序设计 


相关文章: 如何在西部数码注册域名并快速搭建网站?  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊?  如何快速搭建高效WAP手机网站?  如何快速搭建高效WAP手机网站吸引移动用户?  建站VPS选购需注意哪些关键参数?  建站之星北京办公室:智能建站系统与小程序生成方案解析  如何在IIS7中新建站点?详细步骤解析  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异?  如何通过多用户协作模板快速搭建高效企业网站?  建站IDE高效指南:快速搭建+SEO优化+自适应模板全解析  寿县云建站:智能SEO优化与多行业模板快速上线指南  官网自助建站平台指南:在线制作、快速建站与模板选择全解析  建站主机如何选?高性价比方案全解析  小米网站链接制作教程,请问miui新增网页链接调用服务有什么用啊?  如何通过老薛主机一键快速建站?  建站之星后台密码遗忘如何找回?  如何通过FTP服务器快速搭建网站?  宝盒自助建站智能生成技巧:SEO优化与关键词设置指南  制作网站外包平台,自动化接单网站有哪些?  如何配置支付宝与微信支付功能?  如何在局域网内绑定自建网站域名?  ,怎么用自己头像做动态表情包?  如何通过NAT技术实现内网高效建站?  c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  ,在苏州找工作,上哪个网站比较好?  零基础网站服务器架设实战:轻量应用与域名解析配置指南  如何在建站之星网店版论坛获取技术支持?  建站之星安装模板失败:服务器环境不兼容?  天津个人网站制作公司,天津网约车驾驶员从业资格证官网?  如何高效配置IIS服务器搭建网站?  学校为何禁止电信移动建设网站?  网站专业制作公司有哪些,做一个公司网站要多少钱?  网站企业制作流程,用什么语言做企业网站比较好?  如何在IIS中新建站点并配置端口与IP地址?  建站主机与虚拟主机有何区别?如何选择最优方案?  电商平台网站制作流程,电商网站如何制作?  如何构建满足综合性能需求的优质建站方案?  建站ABC备案流程中有哪些关键注意事项?  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程?  公司网站设计制作厂家,怎么创建自己的一个网站?  实例解析Array和String方法  测试制作网站有哪些,测试性取向的权威测试或者网站?  logo在线制作免费网站在线制作好吗,DW网页制作时,如何在网页标题前加上logo?  制作企业网站建设方案,怎样建设一个公司网站?  智能起名网站制作软件有哪些,制作logo的软件?  巅云智能建站系统:可视化拖拽+多端适配+免费模板一键生成  建站之星伪静态规则如何设置?  北京的网站制作公司有哪些,哪个视频网站最好?  网站制作知乎推荐,想做自己的网站用什么工具比较好?  建站与域名管理如何高效结合? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。