Question

我在Angularjs中发现了一些奇怪的行为。我的指令只是添加ng-repeat并将其编译到我的dom元素中。但是，无法访问范围变量item。请查看下面的代码以获得解释。

var demo = angular.module('demo', []);
demo.directive('customRepeat', function($compile) {
    return {
      priority: 2000,
      restrict: 'A',
      compile: function(element){
        element.attr('ng-repeat', 'item in [1,2,3,4,5,6]')
          
        return function(scope, element) {
          $compile(element)(scope)
        }
      }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app='demo'>
    <h3>My Items</h3>
    <div custom-repeat>
      Item: {{item}}
    </div>
</div>

谁有一些Angularjs技能来解决这个问题？

N.B。尝试使用较旧版本的Angularjs（比如1.2.x）运行它，你会看到它按预期工作。

Answer 1

修改原始DOM时编译指令的正确方法是，从指令编译函数（如compileFn）创建var compileFn = $compile(element)，然后在链接函数recompile元素中使用喜欢的scope。这样你在Angular 1.2.X＆amp;中也会看到Maximum call stack exceed error。 1.6.X版。通过打开控制台检查this plunker。

基本上发生了什么，你在指令元素和＆amp;添加ng-repeat。再次重新编译该元素将导致再次编译customDirective，并且这个过程将继续无限发生。因此，在再次编译元素之前，您应该确保已删除custom-report指令属性。这将不允许custom-report无限执行。

var demo = angular.module('demo', []);
demo.directive('customRepeat', function($compile) {
    return {
      priority: 2000,
      restrict: 'A',
      compile: function(element){
        element.attr('ng-repeat', 'item in [1,2,3,4,5,6]')
        element.removeAttr('custom-repeat');
        //this line is need for compilation of element
        var compile = $compile(element);
        return function(scope, element) {
          compile(scope); //linking scope
        }
      }
    }
});

Plunker Demo

Angularjs：动态编译重复

1 个答案: