首先简要说明一下我想做什么:我想遍历数组的元素并显示其内容。根据我从数组中的元素获得的信息,我想显示一个按钮或不显示一个按钮。
但这似乎行不通。让我们看一下代码:
<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 访问内部。 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)
据我所知,我已经以正确的方式声明了所有内容。但我不知道为什么这会导致死循环。
感谢任何帮助!提前致谢。
最佳答案
你的 ng-if 中的函数是异步的,所以它不会像 angular 期望的那样返回 bool 值。它甚至可能根本不返回值,因为不会调用回调。
我建议将观察到的 ng-if 属性更改为范围变量而不是函数调用。然后你可以随时调用你的异步函数(通过 setInterval 或其他......但你绝对应该找到更好的方法)并且在回调中,只需将范围变量设置为 true 或 false。 Ng-if“监视”变量的值并触发一个摘要,其中元素将被渲染或不被渲染。 所以它在 View 中应该看起来像这样:
<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>
和 Controller 方法:
$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;
}
}
}
}
} );
};
唯一剩下的就是在 Controller 初始化时调用该方法,因此只需在 Controller 函数体内调用 $scope.getParticipationStatus($scope.eventDetails._id)。
关于javascript - ng-if 导致无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37593637/