Angular1.x自定义指令实例详解
前端之家收集整理的这篇文章主要介绍了
Angular1.x自定义指令实例详解，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲述了Angular1.x自定义指令。分享给大家供大家参考，具体如下：
调用Module.directive方法，传入指令名称和工厂函数，返回一个对象。
指令名称中每个大写字母会被认为是属性名中的一个独立的词，而每个词之间是以一个连字符分隔的。
返回链式函数
<
Meta charset="UTF-8">
AngularJS Demo
打破对数据属性的依赖
设置一个元素属性，用来动态第设置需要参加运算的键。如果属性名是以data-为前缀的，AngularJS会在生成传给连接函数的属性集合时移除这一前缀。也就是说data-list-property和list-property都会被表示为listProperty。
");
element.append(listElem);
for(var i=0,len=data.length; i').text(data[i][propertyName]) );
}
}
计算表达式
添加过滤器后，自定义指令被破坏了。可以让作用域将属性值当做一个表达式进行计算。scope.$eval()接收两个参数：要计算的表达式和需要用于执行该计算的任意本地数据。
').text(scope.$eval(propertyName,data[i])) );
处理数据变化
添加监听器
");
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循环闭包问题。
');
listElem.append(itemElem);
var index = i;
var watchFn = function (watchScope) {
return watchScope.$eval(propertyName,data[index]);
};
scope.$watch(watchFn,oldValue) {
itemElem.text(newValue);
});
}());
}
或者
');
listElem.append(itemElem);
var watchFn = function (watchScope) {
return watchScope.$eval(propertyName,data[i]);
};
scope.$watch(watchFn,oldValue) {
itemElem.text(newValue);
});
})(i);
jqLite
jqLite中element()、append()等方法的参数是HTML string or DOMElement。
");
for (var i = 0; i < scope.names.length; i++) {
listElem.append("
").append("").text(scope.names[i]);
}
}
上述添加的是字符串，最后添加只有scope.names中最后一条信息。
");
element.append(listElem);
for (var i = 0; i < scope.names.length; i++) {
listElem.append(angular.element("
")
.append(angular.element("").text(scope.names[i])));
}
}
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《》、《》及《》
希望本文所述对大家AngularJS程序设计有所帮助。
原文链接：https://www.f2er.com/js/41186.html
