0

我正在写一个片段来评估用户的答案。如果他的回答是正确的，那么我最后会附加一个正确的图标。我创建了一个自定义指令来评估答案。但我一直遇到臭名昭著的错误：达到 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);
        }
    };
});

据我了解，当您从视图或循环中间错误地更新模型时，会发生此错误。但在这种情况下，我只是在评估模型。最奇怪的部分是指令执行完成并将我的 HTML 字符串附加到 DOM 中。之后发生错误（请参阅屏幕截图）

在此处输入图像描述

注意：我参考了其他帖子，但我无法找到解决方案。

请帮我解决这个问题。

4

1 回答 1

2

我不确定这是否会对您有所帮助（小提琴/笨拙会很有用）但是：

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: '='
},

然后scope.isCorrect直接使用。

您是否也可以尝试使用嵌入的指令，它不需要 DOM 操作逻辑，而是更喜欢 Angular 模板：

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>
于 2013-10-25T09:55:48.073 回答