ng-if导致无限循环

时间:2016-06-02 13:42:15

标签: javascript angularjs angular-ng-if

首先简要介绍一下我想要做的事情:我想迭代一个数组的元素并显示它的内容。基于我从数组中的元素获得的信息,我想显示一个按钮 - 或者不显示。

但这似乎不起作用。我们来看看代码:

class DefaultSubcommandArgParse(argparse.ArgumentParser):
    __default_subparser = None

    def set_default_subparser(self, name):
        self.__default_subparser = name

    def _parse_known_args(self, arg_strings, *args, **kwargs):
        in_args = set(arg_strings)
        d_sp = self.__default_subparser
        if d_sp is not None and not {'-h', '--help'}.intersection(in_args):
            for x in self._subparsers._actions:
                subparser_found = (
                    isinstance(x, argparse._SubParsersAction) and
                    in_args.intersection(x._name_parser_map.keys())
                )
                if subparser_found:
                    break
            else:
                # insert default in first position, this implies no
                # global options without a sub_parsers specified
                arg_strings = [d_sp] + arg_strings
        return super(DefaultSubcommandArgParse, self)._parse_known_args(
            arg_strings, *args, **kwargs
        )

如您所见,我通过ng-if从我的detailedViewController中访问内部。 detailedViewController包含以下方法:

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

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

$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;
            }
        }
    } );
};

据我所知,我已经以正确的方式宣布了一切。但我不知道为什么会导致无休止的循环。

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

1 个答案:

答案 0 :(得分:2)

ng-if中的函数是异步的,所以它不会像angular所期望的那样返回布尔值。它甚至可能根本不返回值,因为不会调用回调。

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

<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)。