jquery - 编译指令导致错误 : $apply already in progress

Question

这看起来很简单。

在 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>

...在我的 Controller 内，我定义了 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)

加载模板失败错误很奇怪，因为我已经四次检查了模板的位置，它是正确的。但我认为该错误是由第一条错误消息引起的。

有人知道这是怎么回事吗？提前致谢。

编辑:Here's the Plunker

编辑2:我使用的是 Angular 1.0.7。

Answer 1

您一开始就不应该在指令之外进行 DOM 操作。您的 showHWClick 而不是修改 DOM函数可能应该修改作用域上的某些属性或对象。然后，您的模板将绑定(bind)到该属性并像任何其他 Angular 模板一样更新。

这一切都在http://docs.angularjs.org/tutorial/中有介绍。 .

如果我不得不猜测您想要完成什么，您可能想看看 ngIf 1.1.5 中引入的指令，用于有条件地添加一段 DOM(不仅仅是显示/隐藏它)。