Question

所以我一直reading this article表示在你的控制器中使用$ watch是不好的。我想接受建议。我的控制器看起来像这样：

.controller('NavigationController', ['$rootScope', '$scope', function ($rootScope, $scope) {
    var self = this;

    // Get our current user
    self.user = $rootScope.user;

    // Watch
    $scope.$watch(function () {

        // Return our user
        return $rootScope.user;
    }, function (user) {

        // Set our user to the new user
        self.user = user;
    });
}]);

我的HTML看起来像这样：

<div class="account-header" ng-controller="NavigationController as controller" ng-cloak ng-show="controller.user.authenticated">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-account">
                    <div class="collapse navbar-collapse" id="account-menu">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown" dropdown>
                                <a class="dropdown-toggle" dropdown-toggle>{{ controller.user.userName }} <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a ui-sref="teams">Team settings</a></li>
                                    <li><a ui-sref="account">Account settings</a></li>
                                    <li><a ui-sref="logout">Sign out</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

您可以看到我只在用户登录时显示帐户菜单。阅读完文章后，我很难看到如何更改控制器。

有人有任何建议吗？

更新1

你们有些人说过，因为它是在根本上，我不必做任何事情。我可以在HTML中使用用户，它应该可以正常工作。我测试了这个：

<div class="account-header" ng-cloak ng-show="user.authenticated">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-account">
                    <div class="collapse navbar-collapse" id="account-menu">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown" dropdown>
                                <a class="dropdown-toggle" dropdown-toggle>{{ user.userName }} <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a ui-sref="teams">Team settings</a></li>
                                    <li><a ui-sref="account">Account settings</a></li>
                                    <li><a ui-sref="logout">Sign out</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

它确实有效。现在我要做的是添加另一个菜单项，只有有任何工具包时才显示此项目。但我宁愿不对每个状态更改进行API调用，所以我唯一能看到的是在添加或删除工具包时修改某些内容。但我不确定最好的方法是什么。

Answer 1

当用户在$ rootScope上更改广播“userLoggin”事件时。然后在控制器中监听该事件。

或$ $在$ rootScope上发出事件，并在控制器中通过注入来监听$ rootScope。

$rootScope.$on('userLoggin' function() {
    // React to user change.
})

AngularJS在控制器中使用$ watch

1 个答案: