javascript - Angular :通过服务或更好的方法更新不同的 Controller

我有一个UserService

angular.module('mango.services', [])
    .factory('UserService', function() {
        var user = {
            id: null,
            name: 'anonymous.'
        };
        function getUser(){
            return user;
        }
        function setUser(val){
            user = val;
        }
        return {
            getUser: getUser,
            setUser: setUser,
        }
});

NavbarController

.controller('NavbarController', ['$scope','$location','UserService', function($scope, $location, UserService){
    $scope.isActive = function (viewLocation) {
        return viewLocation === $location.path();
    };
    $scope.username = UserService.getUser().name;
}])

还有一个UserController，其中有registerUser和loginUser函数。

.controller('UserController', ['$scope', '$http', 'UserService', function($scope, $http, UserService) {
   $scope.loginUser = function(){
        $http.post('/api/1.0/user/authenticate', $scope.user)
            .success(function(data,status,headers,config){
                if (data["valid"] === true) {
                    UserService.setUser(data.user);
                } else {
                    $scope.flashes = data.flashes;
                    $scope.user.password = "";
                }
             })
}

和HTML

        <li ng-switch="username">
            <a ng-class="{ active: isActive('/user/login')}" href="#/user/login" ng-switch-when="anonymous."><i class="fa fa-sign-in"></i> Sign in</a>
            <a ng-class="{ active: isActive('/user/logout')}" href="#/user/logout" ng-switch-default><i class="fa fa-sign-out"></i> Sign out</a>
        </li>

如您所见，如果data.valid为true，我将尝试设置UserService的用户。

服务器正在返回有效的json对象。

但是NavbarController中的用户名值保持“匿名”。 。

我不太了解JS，但是我阅读了一些有关广播和观看的内容。我相信这可能是正确的方法。但也许有更好的选择。

我相信它不起作用的原因是因为工厂退货了。但是使用工厂是没有意义的。

所以本质上我想要的是，如果凭据有效，则设置user.name user.id客户端应用范围。稍后，它应通过“检查客户端用户是否有效”服务。我的 session Cookie已加密。但这超出了问题的范围。

我现在需要的只是从UserController设置应用程序或NavbarController的用户数据。我该怎么做，所以它也更新了DOM又名ng-switch，获得了不同的值。

最佳答案

它不起作用是因为您没有创建某种绑定(bind):使用$scope.username = UserService.getUser().name时，您会在该时刻获得用户名(即anonymous)并永久保留下去。一种解决方法是使用手表。在NavbarController中，将以前的代码替换为:

$scope.$watch(
    function() {
        return UserService.getUser().name;
    },
    function(newval) {
        $scope.username = newval;
    }
);

这将在每个摘要周期中通过函数调用来招致您的应用程序。这个函数调用并不慢，所以没关系。

如果您不希望这种开销，也可以使用事件来完成。在NavbarController中:

$scope.username = UserService.getUser().name;
$scope.on("loggedIn", function(event, newUserName) {
    $scope.username = newUserName;
});

并在UserController中(将$rootScope添加到依赖项中):

if (data["valid"] === true) {
    UserService.setUser(data.user);
    $rootScope.$broadcast("loggedIn", data.user);
}

关于javascript - Angular :通过服务或更好的方法更新不同的 Controller ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20505577/