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)

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

有谁知道出了什么问题？提前致谢。

编辑：这是 Plunker

编辑 2：我正在使用 Angular 1.0.7。

4

2 回答 2

3

一开始，您不应该在指令之外进行 DOM 操作。showHWClick您的函数应该修改范围内的某些属性或对象，而不是修改 DOM 。然后，您的模板将绑定到该属性并像任何其他角度模板一样更新。

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

如果我不得不猜测你想要完成什么，你可能想看看ngIf1.1.5 中引入的指令，以有条件地添加一块 DOM（不仅仅是显示/隐藏它）。

于 2013-07-29T21:24:48.700 回答
1

我已经修改了点击事件，您可以尝试使用以下代码：

$scope.showHWClick = function(classId) {
        $timeout(function(){
            if (!$scope.$$phase) {
                $('#' + classId).parent().parent('.grade-row').after($compile('<tr><td class="homework-row" colspan="9"><progress-report /></td></tr>')($scope));
            }
        }, 500, false);

    }
于 2013-07-27T08:40:49.940 回答