Angularjs：编译ng，重复动态

我发现Angularjs有一些奇怪的行为。我的指令只是添加和编译ng-repeat我的DOM元素。但是范围变量item不可访问。请查看下面的代码以获取解释。Angularjs：编译ng，重复动态

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）来运行它，并且您会发现它可以按预期工作。

来源

2017-01-24 Tympanix

当原DOM被修改为编译指示正确的方法是，从指令创建compileFn编译功能像var compileFn = $compile(element)然后内部链接功能的重新编译元素与喜欢scope。这样您在Angular 1.2.X & 1.6.X版本中也会看到Maximum call stack exceed error。打开控制台检查this plunker。

基本上什么发生的是，你在指令元素&上添加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

来源

2017-01-24 02:55:21

也许我并不清楚。如果你运行代码，你会发现'{{item}}'没有被绑定。它应该说'项目1'，'项目2' ...等等。它不会抛出任何类型的错误。 – Tympanix

最奇怪的是，正如我刚才注意到的那样，在{{item}}之后添加一个空的表达式{{}}'实际上暂时修复了这个问题。它肯定看起来像一个错误。 – Tympanix

@Tympanix用plunker演示检查我的更新答案..希望现在清楚.. –

Angularjs：编译ng，重复动态

回答

相关问题