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

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

这篇文章主要介绍了Angular1.x自定义指令,结合实例形式分析了Angular1.x自定义指令的实现与使用方法,以及相关操作技巧与注意事项,需要的朋友可以参考下

本文实例讲述了Angular1.x自定义指令。分享给大家供大家参考,具体如下:

调用Module.directive方法,传入指令名称和工厂函数,返回一个对象。

指令名称中每个大写字母会被认为是属性名中的一个独立的词,而每个词之间是以一个连字符分隔的。

 var myApp = angular.module('myApp', []) .directive("unorderedList", function () { return function(scope, element, attrs) { }; }); 

返回链式函数

   AngularJS Demo 

Products

打破对数据属性的依赖

设置一个元素属性,用来动态第设置需要参加运算的键。如果属性名是以data-为前缀的,AngularJS会在生成传给连接函数的属性集合时移除这一前缀。也就是说data-list-property和list-property都会被表示为listProperty。

 
 var data = scope[attrs['unorderedList']]; var propertyName = attrs['listProperty']; if(angular.isArray(data)){ var listElem = angular.element("
    "); element.append(listElem); for(var i=0, len=data.length; i').text(data[i][propertyName]) ); } }

计算表达式

 

添加过滤器后,自定义指令被破坏了。可以让作用域将属性值当做一个表达式进行计算。scope.$eval()接收两个参数:要计算的表达式和需要用于执行该计算的任意本地数据。

 listElem.append( angular.element('
  • ').text(scope.$eval(propertyName, data[i])) );
  • 处理数据变化

     
     $scope.incrementPrices = function () { for(var i=0,len = $scope.products.length; i

    添加监听器

     if(angular.isArray(data)){ var listElem = angular.element("
      "); element.append(listElem); for(var i=0, len=data.length; i'); 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'); 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('
  • '); 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("
      "); for (var i = 0; i ").append("").text(scope.names[i]); } }

    上述添加的是字符串,最后添加只有scope.names中最后一条信息。

     return function (scope, element, attrs) { var listElem = angular.element("
      "); element.append(listElem); for (var i = 0; i ") .append(angular.element("").text(scope.names[i]))); } }

    更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

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

    以上就是Angular1.x自定义指令实例详解的详细内容,更多请关注易知道|edz.cc其它相关文章!

    推荐阅读