AngularJS-錯誤：已達到10 $ digest（）迭代。中止！在一個自定義指令

Question

我正在寫剪貼板來評估用戶的答案。如果他的回答是正確的，那麼我最後會添加一個正確的圖標。我創建了一個自定義指令來評估答案。但我一直在遇到臭名昭着的錯誤：達到了10次$ digest（）迭代。中止！錯誤。

這裏是我的部分的快照，

<li ng-repeat="answer in practice.currentQuestion.answers" class="answer"> 
      <label class="radio multiple answer-body" evaluate-me is-correct="{'isCorrect': answer.isCorrect}" > 
       <div class="answer-body pull-left" ng-bind-html-unsafe="answer.body|removeemptyparagraphs"></div> 
      </label> 
    </li> 
</ul> 

，這我的指令，

app.directive('evaluateMe', function() { 
    return { 
     restrict : 'A', 
     scope:{ 
      answer: '=isCorrect' 
     }, 
     link : function(scope, element, attrs) { 
      var prepend; 
      console.log(scope.answer.isCorrect); 
      if(scope.answer.isCorrect){ 
       prepend = '<i class="student-sprite-1-right-icon-for-qus pull-right"></i>'; 
      }else{ 
       prepend = '<i class="student-sprite-1-cancel-icon-for-qus pull-right"></i>'; 
      } 
      element.append(prepend); 
     } 
    }; 
}); 

這是我的理解是，這個錯誤發生在你沒有正確地更新從模型查看或在循環中。但在這種情況下，我只是在評估模型。最爲棘手的部分是指令執行完成並在DOM內附加了我的HTML字符串。錯誤發生後（請參閱圖）

注：我已經提到的其他職位，但我沒能找出一個解決方案。

請幫我解決這個問題。

Answer 1

我不知道這是否會幫助你（小提琴/普拉克將是有益的），但：

1）您要添加不必要的複雜性傳遞給指令的變量;嘗試：

<label class="radio multiple answer-body" evaluate-me answer="answer"> 

，並在代碼：

scope:{ 
    answer: '=' 
}, 

或者，如果你只是想通過isCorrect標誌：

<label class="radio multiple answer-body" evaluate-me is-correct="answer.isCorrect"> 

，並在代碼：

scope:{ 
    isCorrect: '=' 
}, 

然後用直接。

---

你能不能也給使用transclusion一試的指令，這並不需要DOM操作邏輯，寧願角模板代替：

app.directive('evaluateMe', function() { 
    return { 
     restrict : 'A', 
     template: 
      "<div>" + 
       "<div ng-transclude></div>" + 
       "<i ng-class=\"{" + 
        "'student-sprite-1-right-icon-for-qus': isCorrect, " + 
        "'student-sprite-1-cancel-icon-for-qus': !isCorrect" + 
       "}\" class=\"pull-right\"></i>" 
      "</div>", 
     transclude: true, 
     scope:{ 
      isCorrect: '=' 
     } 
    }; 
}); 

用作：

<label class="radio multiple answer-body" evaluate-me is-correct="answer.isCorrect"> 
    <div any content here-it will be transcluded></div> 
</label>