Как вставить HTML-код $ compile'd внутри директивы без получения ошибки рекурсии $ digest?

Question

У меня есть директива, в зависимости от данных элементов в ng-repeat (из базы данных), построить собственный HTML с переключателем корпуса:

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() iterations reached. Aborting!. Как я должен заниматься этим?

Answer 1

Ответ заключается в создании директивы «sub» для каждого выбора, поэтому вы можете связывать их по значению вместо вызова функций с аргументами. Вы оставляете процедурный Javascript, но процедурный Javascript не оставит вас

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){ 
    } 
    } 
});