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 に答える