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>

DEMO

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);

DEMO

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屋！