AngularJS中的指令

Posted 2020-06-18 BestMe丶

欢迎大家讨论与指导 : ）

　　明天天会继续更新本文O(∩_∩)O

 前言

　　当AngularJS中的内置指令不能满足我们的需求，或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时，我们应该创建自定义指令来满足需求。

 一、创建自定义指令

　   一 . 1 命名规则 

　　我们要在创建指令时使用峰驼式命名，例如指令是 <div unordered-list></div>  在声明指令时我们需要这样子写 app.directive("unorderedList", function(){..})  同理，当我们想要获取包含指令的元素的属性时，例如 <div unordered-list="product"></div> ，也要使用峰驼式的命名规则 var attrProduct = attrs["unorderedList"]  

　   一 . 2 从作用域中获取数据

　　指令的link函数包含三个参数，分别是scope, element, attrs 其中，scope参数代表该指令被应用到的视图所在控制器的作用域。简单来说就是，这个指令当前在哪个controller的作用域下，scope就相当于这个作用域$scope了。假设，我们的"unorderedList"指令在defaultController控制器的作用域下，那么我们如何通过从这个作用域中获取我们所需要的$scope.product呢(这里举个例子)

app.controller("defaultController", [‘$scope‘, function($scope){
     $scope.product = [ 
    　　{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}
     ]
}]);

app.directive("unorderedList", function(){
     return function(scope, element, attrs){
     　　var data = scope[attrs["unorderedLsit"]]
     }
})    

　　答案是通过为包含指令的元素的属性设置具体的值(这里为product)，例如 <div unordered-list="product"></div> ，然后通过attrs属性获取这个具体的值 var data = scope[attrs["unorderedLsit"]] 

　　一 . 3 打破对数据属性的依赖

　　对于指令函数中，我们应当尽量减少对代码过程的"假设"，并通过为包含指令的元素增加具体的属性来增强指令的复用性。例如我们"假设"我们在上面例子所获取的data var data = scope[attrs["unorderedLsit"]] 中的每个item中都含有name属性，我们会这样子操作我们的代码：

for(var i = 0; i < data.length; i++){
     var str = data[i].name 
     // .... "假设"有name属性
}

　　但其实我们应该这样子操作  <div unordered-list="product" list-property="name"></div>  我们通过加入另一个list-property属性并为其赋上具体的值"name"，来让我们不需要进行"假设",从而提高指令的复用率

for(var i = 0; i < data.length; i++){
     var property = attrs["listProperty"]
     var str = data[i].property 
     // .... 不要进行"假设"
}

　　一 . 4 使用$eval进行计算

　　当我们指令的属性需要和filter过滤器或者其他一些组件一起工作的时候<div unordered-list="product" list-property="price | currency"></div> 例如这里，我们需要指令获取price属性，并且需要配合filter currency来进行预处理，我们应该怎么样操作呢？ 答案是$eval，通过获取表达式并通过$eval运行，即可达到我们所需要的效果。注：$eval的第一个参数是具体的表达式，第二个参数是传到表达式进行计算的参数。

for(var i = 0; i < data.length; i++){
   var propertyExrpession = attrs["listProperty"]
   scope.$eval(propertyExrpession, data[i])
}

　　一 . 5 响应数据的变化

　　很多时候，当我们刷新数据时，我们会发现"绑定"到指令上的数据并没有发生相应的变化，这是为什么呢？原因是，很多时候我们所"绑定"的是指令在初始化时scope上的数据。当应用运行起来时，并且我们没有为指令添加监听器的时候，指令上的数据便不会随着Model的数据改变而改变了。让我们来添加监听器吧

var watchFn = function(watchScope){
    return watchScope.$eval(propertyExpression, data[index]);
}
scope.$watch(watchFn, function(newVal, oldVal){
    itemElement.text(newVal);
})

　　我们看到，在指令内部我们使用scope.$watch对一个函数进行监听。这里有几个值得注意的地方：1 . 使用$watch对一个函数进行监听，该函数会有一个参数(此处为watchScope)来表达监听者的作用域 。2 . 我们为什么要对一个函数，而不是某个值进行监听呢？因为这个函数所return的就是一个会改变的值。3 . 什么时候，这个会改变的值会进行变化呢？答案是当$eval函数上的第二个参数data发生改变时(在AngularJS中，当作用域的某个属性发生变化时，以它为依赖的函数也会重新进行计算。也就是说$scope.abc发生了变化，那么function someFun ($scope.abc){...} 也会重新计算一遍)。因为$eval重新运算，因此其return的值也就有可能发生变化了。通过以上3点，我们可以使指令实时地绑定的，而不再是绑定指令初始化阶段的数据了

　　 一 . 6 闭包

　　闭包带来的问题这里就不多说了，我们应该使用"立即调用的函数表达式"(IIFE)来解决这个问题。

for(var i = 0; i < data.length; i++){
     (function(){//建立IIFE
         var index = i;
         var someFun = function(index){
                //...
         }
     }())  
}

 

 二、创建复杂指令

--------明天更新-------

 

　　

 

　　参考资料

　　《AngularJS高级程序设计》P357