如何插入$ compile'd HTML code中的指令内没有得到$消化递归错误? [英] How to insert $compile'd HTML code inside the directive without getting $digest recursion error?
问题描述
我有一个指令,根据不同的 NG-重复
项目数据(从数据库),建立与交换机的情况下自定义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>"
}
}
}
}
});
在code以上的作品,但可绑定 {{} step.title}
里面的功能不起作用。我试图 $编译(HTML)($范围)
,但它给了我一个错误:$ 10摘要()迭代到达。中止!
。我应该如何处理呢?
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?
推荐答案
答案就是创造一个子指令为每个选择,这样你就可以通过值而不是绑定调用函数带有参数的他们。你离开的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'd HTML code中的指令内没有得到$消化递归错误?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!