AngularJS - ngRepeat 在 $compile 元素的属性时应用两次 [英] AngularJS - ngRepeat is applied double times when $compile the element's attributes
问题描述
我想要这个
$scope.name = 'Angular';$scope.list = ['foo: {{name}}', 'bar: {{name}}'];<div ng-repeat="列表中的模板" compile="模板"></div>
成为
<div real="foo: Angular"></div><div real="bar: Angular"></div>
所以我使用 $compile:
$compileProvider.directive('compile', function ($compile) {返回函数(范围、元素、属性){范围.$watch(功能(范围){返回范围.$eval(attrs.compile);},功能(值){//element.html(value);//$compile(element.contents())(scope);element.attr("real", value);element.removeAttr("编译");$compile(element)(scope);});};})
但是,它输出:
<div real="foo: Angular"></div><div real="foo: Angular"></div><div real="bar: Angular"></div><div real="bar: Angular"></div>
有什么问题吗?
演示:http://plnkr.co/edit/OdnriGpd7eMBtfp2u1b2?p=preview
试试这个:
<div compile="模板"></div>
说明:
当您将指令与 ng-repeat
放在同一元素上并调用 $compile(element)(scope);
时,您的元素将重新编译 包括 ng-repeat,导致 ng-repeat
再运行一次.当我还删除指令中的 ng-repeat 时,它会起作用:
element.attr("real", value);element.removeAttr("编译");element.removeAttr("ng-repeat");$compile(element)(scope);
不推荐使用此解决方案,因为我们对 element.removeAttr("ng-repeat");
记住还要将 priority:1500
和 terminal:true
应用于指令以避免在 angular 编译元素后再次编译:
$compileProvider.directive('compile', function($compile) {返回 {优先级:1500,终端:真,链接:函数(范围,元素,属性){范围.$watch(功能(范围){返回范围.$eval(attrs.compile);},功能(值){//element.html(value);//$compile(element.contents())(scope);element.attr("real", value);element.removeAttr("编译");$compile(element)(scope);});}};});
有关这 2 个设置的更多信息.查看 从 AngularJS 中的指令添加指令
I want this
$scope.name = 'Angular';
$scope.list = ['foo: {{name}}', 'bar: {{name}}'];
<div ng-repeat="template in list" compile="template"></div>
to be
<div real="foo: Angular"></div>
<div real="bar: Angular"></div>
So i use $compile:
$compileProvider.directive('compile', function ($compile) {
return function (scope, element, attrs) {
scope.$watch(
function (scope) {
return scope.$eval(attrs.compile);
},
function (value) {
//element.html(value);
//$compile(element.contents())(scope);
element.attr("real", value);
element.removeAttr("compile");
$compile(element)(scope);
}
);
};
})
but, it output:
<div real="foo: Angular"></div>
<div real="foo: Angular"></div>
<div real="bar: Angular"></div>
<div real="bar: Angular"></div>
so what's the problem ?
Demo: http://plnkr.co/edit/OdnriGpd7eMBtfp2u1b2?p=preview
Try this instead:
<div ng-repeat="template in list">
<div compile="template"></div>
</div>
Explanation:
When you put your directive on the same element with ng-repeat
and call $compile(element)(scope);
, your element is recompiled including the ng-repeat, causing the ng-repeat
to run one more time. When I also remove the ng-repeat in the directive, it works:
element.attr("real", value);
element.removeAttr("compile");
element.removeAttr("ng-repeat");
$compile(element)(scope);
This solution is not recommended because we hard-code the element.removeAttr("ng-repeat");
Remember to also apply priority:1500
and terminal:true
to the directive to avoid compiling again after angular has compiled the element:
$compileProvider.directive('compile', function($compile) {
return {
priority:1500,
terminal:true,
link: function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
//element.html(value);
//$compile(element.contents())(scope);
element.attr("real", value);
element.removeAttr("compile");
$compile(element)(scope);
}
);
}
};
});
For more information about these 2 settings. Check out Add directives from directive in AngularJS
这篇关于AngularJS - ngRepeat 在 $compile 元素的属性时应用两次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!