应用场景
某一个特定的功能，我们要在应用程序内或程序之间进行复用
应用模板
$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允许指令被用作一个元素；
指定特定的显示字段
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'
}
})