Angularjs:动态编译 ng-repeat [英] Angularjs: Compile ng-repeat dynamically

问题描述

我发现 Angularjs 有一些奇怪的行为.我的指令只是将 ng-repeat 添加并编译到我的 dom 元素中.但是范围变量 item 是不可访问的.查看下面的代码进行解释.

var demo = angular.module('demo', []);demo.directive('customRepeat', function($compile) {返回 {优先级:2000，限制:'A'，编译:函数(元素){element.attr('ng-repeat', 'item in [1,2,3,4,5,6]')返回函数(范围，元素){$编译(元素)(范围)}}}});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script><div ng-app='demo'><h3>我的项目</h3><div自定义重复>项目:{{项目}}

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

注意尝试使用旧版本的 Angularjs(比如 1.2.x)运行它，你会看到它按预期工作.

解决方案

修改原始 DOM 时编译指令的正确方法是，从指令编译函数创建 compileFn 如 var compileFn =$compile(element) 然后在链接函数内部重新编译具有喜欢的 scope 的元素.这样你也会在 Angular 1.2.X 和 Angular 1.2.X 中看到 Maximum call stack exceeded error1.6.X 版本.打开控制台查看这个plunker.

基本上发生的事情是，您在指令元素 & 上添加了 ng-repeat再次重新编译该元素将导致再次编译 customDirective，并且这个过程将无限地持续发生.所以在再次编译元素之前，你应该确保你已经删除了 custom-report 指令属性.这将不允许 custom-report 无限执行.

var demo = angular.module('demo', []);demo.directive('customRepeat', function($compile) {返回 {优先级:2000，限制:'A'，编译:函数(元素){element.attr('ng-repeat', 'item in [1,2,3,4,5,6]')element.removeAttr('自定义重复');//这一行需要编译元素var compile = $compile(element);返回函数(范围，元素){编译(范围)；//链接范围}}}});

Plunker 演示

I have found some strange behavior with Angularjs. My directive simply adds and compiles ng-repeat to my dom element. However the scope variable item is not accessible. Look at the code below for explanation.

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>

Who has some Angularjs skills to figure this one out?

N.B. Try and run this with an older version of Angularjs (say 1.2.x) and you will see that it works as intended.

解决方案

The correct way to compile directive when raw DOM is modified is, create compileFn from directive compile function like var compileFn = $compile(element) and then inside link function recompile element with liked scope. That way you will also see Maximum call stack exceed error in both Angular 1.2.X & 1.6.X version. Check this plunker by opening console.

Basically what happening is, you are adding an ng-repeat on directive element & recompiling that element once again which will lead to compilation of customDirective once again, and this process will keep on happening infinitely. So before compiling element once again, you should make sure that you had removed custom-report directive attribute. That will not allowed to custom-report infinite execution.

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:动态编译 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！