2

これはかなり単純に思えます。

Angular JS では、ユーザーがページ上のリンクをクリックしたときにディレクティブをコンパイルしようとしています。これを行うために、ng-click ハンドラーがあります。

<a ng-switch-when="grade" id="{{ item.gb_class_id }}" ng-click="showHWClick(item.gb_class_id, item.period_id, item.student_id)" href="">{{ item.grade }}</a>

...そしてコントローラー内で、ng-click関数を定義します：

$scope.showHWClick = function(classId) {

        $('#' + classId).parent().parent('.grade-row').after($compile('<tr><td class="homework-row" colspan="9"><progress-report /></td></tr>')($scope));

    }

そして、これが私の指示です：

.directive('progressReport', function() {
    return {
        restrict: 'E',
        templateUrl: 'Content/app/dashboard/progressreport.html'
    }
});

つまり、ユーザーがリンクをクリックしたときにテンプレートをコンパイルしているだけです。問題は、次のエラー メッセージが返されることです。

Error: $apply already in progress at Error (<anonymous>) at beginPhase (http://localhost:81/content/lib/angular/angular.js:8334:15) at Object.Scope.$apply (http://localhost:81/content/lib/angular/angular.js:8136:11) at Object.$delegate.__proto__.$apply (http://localhost:81/#/:855:30) at done (http://localhost:81/content/lib/angular/angular.js:9170:20) at completeRequest (http://localhost:81/content/lib/angular/angular.js:9333:7) at XMLHttpRequest.xhr.onreadystatechange (http://localhost:81/content/lib/angular/angular.js:9303:11) at http://localhost:81/content/lib/angular/angular.js:9312:11 at sendReq (http://localhost:81/content/lib/angular/angular.js:9146:9) at $http (http://localhost:81/content/lib/angular/angular.js:8937:17)

Error: Failed to load template: Content/app/dashboard/progressreport.html at Error (<anonymous>) at http://localhost:81/content/lib/angular/angular.js:4549:17 at http://localhost:81/content/lib/angular/angular.js:8957:11 at wrappedErrback (http://localhost:81/content/lib/angular/angular.js:6855:57) at http://localhost:81/content/lib/angular/angular.js:6931:53 at Object.Scope.$eval (http://localhost:81/content/lib/angular/angular.js:8057:28) at Object.Scope.$digest (http://localhost:81/content/lib/angular/angular.js:7922:25) at Object.$delegate.__proto__.$digest (http://localhost:81/#/:844:31) at Object.Scope.$apply (http://localhost:81/content/lib/angular/angular.js:8143:24) at Object.$delegate.__proto__.$apply (http://localhost:81/#/:855:30)

テンプレートの場所を 4 回確認したところ正しいので、テンプレートの読み込みに失敗したというエラーは奇妙です。しかし、エラーは最初のエラーメッセージの結果であると思います。

誰が何が悪いのか知っていますか？前もって感謝します。

編集：これがプランカーです

編集 2:Angular 1.0.7 を使用しています。

4

2 に答える 2

3

そもそも、ディレクティブの外で DOM 操作を行うべきではありません。関数は、DOM を変更するのではなくshowHWClick、スコープ上のプロパティまたはオブジェクトを変更する必要があります。テンプレートはそのプロパティにバインドされ、他のAngularテンプレートと同様に更新されます。

これはすべてhttp://docs.angularjs.org/tutorial/でカバーされています。

あなたが達成しようとしていることを推測する必要がある場合はngIf、1.1.5 で導入されたディレクティブを見て、条件付きで DOM の一部を追加することをお勧めします (単に表示/非表示にするだけではありません)。

于 2013-07-29T21:24:48.700 に答える