angularJS之“自定义指令”

应用场景

---

某一个特定的功能，我们要在应用程序内或程序之间进行复用

应用模板

---

<directive-name data-source="data"></directive-name>

$scope.data = [
   {'name': 'adiu', 'interesting': '听音乐', 'value': 1},
   {'name': 'jack', 'interesting': '看电视', 'value': 2},
   {'name': 'jenny', 'interesting': '打篮球', 'value': 3}
]

app.module('app').directive('directiveName', function() {
    return {
        link: function(scope, element, attrs) {
            var data = scope[attrs['source']];
            if(angular.isArray(data))
            {
                angular.forEach(data, function(item) {
                    console.log(item);
                })
            }
        },
        template: '',
        restrict: 'E' 
    }
})

• 当angularJS建立指令的每个实例时，链接函数（link）就会被调用并接收三个参数：指令被应用到视图的作用域，指令被应用到的HTML元素，HTML元素的属性；这三个参数的顺序是固定的。
• 实现自定义指令的第一步是从作用域中获取要显示的数据data
• restrict中， A允许指令被作用一个属性（默认）；E允许指令被用作一个元素；

指定特定的显示字段

---

<directive-name data-source="data" list-filed="name"></directive-name>

app.module('app').directive('directiveName', function() {
    return {
        link: function(scope, element, attrs) {
            var data = scope[attrs['source']];
            var name= attrs['listField'];
            if(angular.isArray(data))
            {
                angular.forEach(data, function(item) {
                    console.log(item[name]);
                })
            }
        },
        template: '',
        restrict: 'E' 
    }
})

• 通过添加自定义属性来指定视图展示所需的字段

给特定的显示字段添加过滤器所引起的问题

---

• 问题
  这种操作破坏了我们的自定义指令，从属性中读出值并将该值用作要显示的字段名称
• 解决方案
  让作用域将属性值当作一个表达式来进行计算，通过 scope.$eval() 解决

app.module('app').directive('directiveName', function() {
    return {
        link: function(scope, element, attrs) {
            var data = scope[attrs['source']];
            var expression= attrs['listField'];
            if(angular.isArray(data))
            {
                angular.forEach(data, function(item) { 
                    console.log(scope.$eval(expression, item));
                })
            }
        },
        template: '',
        restrict: 'E' 
    } 
})