ng-if 导致无限循环

Question

首先简要描述我想要做什么：我想迭代数组的元素并显示其内容。根据我从数组内的元素获得的信息，我想显示或不显示按钮。

但这似乎行不通。我们看一下代码：

<div class="padding20" ui-view="create-event-form" ng-controller="detailedViewController" ng-init="loadDetails()">
 <button type="submit" class="button success" ng-if="getParticipationStatus(eventDetails._id)">Participate on this event!</button>

正如你所看到的，我通过 ng-if 访问我的DetailedViewController 中的方法。详细视图控制器包含以下方法：

$scope.getParticipationStatus = function( eventId ) {
    var userName = cookieUserManagement.getUsername();
    userClient.getUserEvents( eventId, userName, function ( success, hostingList ) {
        var i = 0;
        var participationStatus;
        if ( success ) {
            hostingList = hostingList.ownEvents;
            if (hostingList.length > 0) {
                for (i = 0; i < hostingList.length; i++) {
                    if (hostingList[i]._id == eventId) {
                        participationStatus = true;
                    } else {
                        participationStatus =  false;
                    }
                }
                return participationStatus;
            }
        }
    } );
};

现在的问题是：所有参数都以正确的方式处理。我看到了正确的 ID、正确的对象，一切似乎都是正确的。但是这段代码会导致无限循环（即放入警报并享受来自浏览器的永不停歇的警报）和以下错误消息：

angular.js:13642TypeError: callback is not a function
at services.js:374
at angular.js:16104
at m.$eval (angular.js:17378)
at m.$digest (angular.js:17191)
at m.$apply (angular.js:17486)
at l (angular.js:11637)
at D (angular.js:11843)
at XMLHttpRequest.w.onload (angular.js:11776)(anonymous function) @ angular.js:13642


angular.js:13642Error: [$rootScope:infdig] http://errors.angularjs.org/1.5.6/$rootScope/infdig?p0=10&p1=%5B%5D
at Error (native)
at http://127.0.0.1:3000/node_modules/angular/angular.min.js:6:412
at m.$digest (http://127.0.0.1:3000/node_modules/angular/angular.min.js:143:281)
at m.$apply (http://127.0.0.1:3000/node_modules/angular/angular.min.js:145:401)
at l (http://127.0.0.1:3000/node_modules/angular/angular.min.js:97:250)
at D (http://127.0.0.1:3000/node_modules/angular/angular.min.js:101:373)
at XMLHttpRequest.w.onload (http://127.0.0.1:3000/node_modules/angular/angular.min.js:102:397)

据我看来，我已经以正确的方式宣布了一切。但我不知道为什么这会导致无限循环。

任何帮助表示赞赏！提前致谢。

Answer 1

ng-if 中的函数是异步的，因此它不会返回 Angular 期望的布尔值。它甚至可能根本不返回该值，因为不会调用回调。

我建议将观察到的 ng-if 属性更改为范围变量而不是函数调用。然后，您可以随时调用异步函数（通过 setInterval 或其他方式...但您绝对应该找到更好的方法），并且在回调中，只需将范围变量设置为 true 或 false 即可。NG-if“监视”变量的值，并将触发一个摘要，其中元素将被渲染或不会被渲染。所以它在视图中应该看起来像这样：

<div class="padding20" ui-view="create-event-form" ng-controller="detailedViewController" ng-init="loadDetails()">
<button type="submit" class="button success" ng-if="participationStatus">Participate on this event!</button>

以及控制器方法：

$scope.getParticipationStatus = function( eventId ) {
    var userName = cookieUserManagement.getUsername();
    userClient.getUserEvents( eventId, userName, function ( success, hostingList ) {
        var i = 0;
        if ( success ) {
            hostingList = hostingList.ownEvents;
            if (hostingList.length > 0) {
                for (i = 0; i < hostingList.length; i++) {
                    if (hostingList[i]._id == eventId) {
                        $scope.participationStatus = true;
                    } else {
                        $scope.participationStatus =  false;
                    }
                }
            }
        }
    } );
};

剩下的唯一一件事就是在控制器初始化时调用该方法，因此只需在控制器函数体内调用 $scope.getParticipationStatus($scope.eventDetails._id) 即可。