如何在指令中插入$ compile&#39 HTML代码而又不会出现$ digest递归错误? [英] How to insert $compile'd HTML code inside the directive without getting $digest recursion error?

问题描述

我有一条指令，根据 ng-repeat 项数据(来自数据库)，使用切换用例构建自定义HTML:

I have a directive that, depending on the ng-repeat item data (from the database), build custom HTML with a switch case:

app.directive('steps', function($compile){
  return {
    'restrict': 'A',
    'template': '<h3>{{step.name}}</h3><ul ng-repeat="opt in step.opts"><div ng-bind-html-unsafe="extra(opt)"></div></ul>',
    'link': function($scope, $element){
       $scope.extra = function(opt){
         switch ($scope.step.id){
           case 1:
             return "<div>Some extra information<select>...</select></div>"
           case 2:
             return "<div><input type='checkbox' ng-model='accept'> Accept terms</div>"
           case 3:
             return "<div>{{step.title}}<select multiple>...</select></div>"
        }
       }
    }
  }
});

上面的代码有效，但是该函数内可绑定的 {{step.title}} 不起作用.我尝试了 $ compile(html)($ scope)，但是它给了我一个 Error:达到了10个$ digest()迭代.中止！.我应该如何处理?

the code above works, but the bindable {{step.title}} inside the function doesn't work. I tried $compile(html)($scope) but it gave me a Error: 10 $digest() iterations reached. Aborting!. How am I supposed to deal with this?

推荐答案

答案是为每个opt创建一个"sub"指令，因此您可以按值绑定它们，而不必使用参数调用函数.您离开了程序性Javascript，但程序性Javascript并没有离开您

The answer is to create a "sub" directive for each opt, so you can bind them by value instead of calling functions with arguments. You leave procedural Javascript, but procedural Javascript doesn't leave you

app.directive('opt', function($compile){
   return {
   'restrict': 'A',
   'template': '<div>{{extra}}</div>',   
   'link': function($scope, $element){
     switch ($scope.step.id){
       case 1:
         extra = "<div>Some extra information<select>...</select></div>";break;
       case 2:
         extra = "<div><input type='checkbox' ng-model='accept'> Accept terms</div>";break;
       case 3:
         extra = "<div>{{step.title}}<select multiple>...</select></div>";break;
     }

     $scope.extra = $compile(extra)($scope);
   }
  }
});

app.directive('steps', function(){
   return {
   'restrict': 'A',
   'template': '<h3>{{step.name}}</h3><ul><li ng-repeat="opt in step.opts" opt></li></ul>',
   'link': function($scope, $element){
   }   
  }
});

这篇关于如何在指令中插入$ compile&#39 HTML代码而又不会出现$ digest递归错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！