本文实例讲述了Angular1.x自定义 指令。分享 给大家供大家参考，具体如下：
调用 Module.directive方法 ，传入指令名称 和工厂函数 ，返回一个 对象。
指令名称 中每个大写字母会被认为是属性 名中的一个 独立的词，而每个词之间是以一个 连字符分隔的。
rush:js;">
var myApp = angular.module('myApp',[])
.directive("u
nor deredList",function () {
return function(s
cop e,element,attrs) {
};
});
返回链式函数
rush:js;">
<
Meta charset="UTF-8">
AngularJS Demo
打破对数据属性 的依赖
设置一个 元素属性 ，用来动态第设置需要参加运算的键。如果属性 名是以data-为前缀的，AngularJS会在生成 传给连接函数 的属性 集合时移除这一前缀。也就是说data-list-property和list-property都会被表示为listProperty。
rush:xhtml;">
nordered-list="products" list-property="name">
rush:js;">
var data = s
cop e[attrs['u
nor deredList']];
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]) );
}
}
计算表达式
rush:xhtml;">
nordered-list="products" list-property="price | currency">
添加 过滤器后，自定义 指令被破坏了。可以让作用域将属性 值当做一个 表达式进行计算。scop e.$eval()接收两个参数：要计算的表达式和需要用于执行该计算的任意本地数据。
rush:js;">
listElem.append( angular.element('
').text(scop e.$eval(propertyName,data[i])) );
处理数据变化
rush:js;">
$s
cop e.incrementPrices = function () {
for(var i=0,len = $s
cop e.products.length; i
cope.products[i].price++;
}
}
添加 监听器
rush:js;">
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 (watchScop e) {
return watchScop e.$eval(propertyName,data[i]);
};
scop e.$watch(watchFn,function (newValue,oldValue) {
itemElem.text(newValue);
});
}
}
第一个 函数 (监听器函数 )基于作用域中的数据计算出一个 值，该函数 在每次作用域发生变化时都会被调用 。如果该函数 的返回值发生了变化，处理函数 就会被调用 ，这个过程就像字符串表达式方式一样。提供一个 函数 来监听，能够从容地面对表达式中有可能带有过滤器的数据值得情形。
第二个监听器函数 是针对$eval()计算的表达变化，来执行回调函数 的。
以上代码 并不能正确显示 ，涉及到for循环闭包问题。
rush:js;">
for(var i=0,len=data.length; i
');
listElem.append(itemElem);
var index = i;
var watchFn = function (watchScop e) {
return watchScop e.$eval(propertyName,data[index]);
};
scop e.$watch(watchFn,oldValue) {
itemElem.text(newValue);
});
}());
}
或者
rush:js;">
(function (i) {
var itemElem = angular.element('
');
listElem.append(itemElem);
var watchFn = function (watchScop e) {
return watchScop e.$eval(propertyName,data[i]);
};
scop e.$watch(watchFn,oldValue) {
itemElem.text(newValue);
});
})(i);
jqLite
jqLite中element()、append()等方法 的参数是HTML string or DOMElement。
rush:js;">
return function (s
cop e,attrs) {
var listElem = element.append("
");
for (var i = 0; i < scop e.names.length; i++) {
listElem.append("").append("").text(scop e.names[i]);
}
}
上述添加 的是字符串，最后添加 只有scop e.names中最后一条信息。
rush:js;">
return function (s
cop e,attrs) {
var listElem = angular.element("
");
element.append(listElem);
for (var i = 0; i < scop e.names.length; i++) {
listElem.append(angular.element("")
.append(angular.element("").text(scop e.names[i])));
}
}
更多关于AngularJS相关内容 感兴趣的读者可查看本站专题：《》、《 》及《 》
希望本文所述对大家AngularJS程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
