Question

我正在写一些小练习来自学AngularJS，我正在尝试编写一些简单的用户授权任务。我有一个表单来收集/输入用户名和密码，然后使用$http和CORS（因为我的REST服务在不同的端口上运行）将它们发送到休息服务，它们被检查，如果有的话匹配我返回一个UUID并创建一个令牌，并$broadcast $rootScope上的一个loggedIn值为true，就像这样。

// this is in a service I call 'authService'

this.login = function (user) {

    return $http({method: 'POST', url: 'http://127.0.0.1:3000/login', data: user})
        .then(function (response) {

            // set up a local storage token
            storageService.setLocalStorage('token', response.data[0].uuid);
            // broadCast is loggedIn - we have a match
            $rootScope.loggedInUser = true; // this is set to false at the .run() of the app
            $rootScope.$broadcast('LoggedIn');

            return 1;
        }, function () {
            // return http code later
            return 0;
        });

    };

    this.getLoggedIn = function () {
        return  $rootScope.loggedInUser;
    };

现在，在单独的菜单视图中，我有以下条件（authService作为菜单控制器的依赖项添加）：

<div id="logIn" ng-show="!authService.getLoggedIn()">...</div>

现在当我第一次加载应用程序条件正确时，但是如果用户正确登录（因此div）没有显示，我希望更新此条件。在菜单控制器中，我有以下代码，似乎没有做任何事情？

   $scope.$on('LoggedIn', function () {
        authService.getLoggedIn(); // doesn't update the view?
        console.log($rootScope.loggedInUser); // returns true
        console.log(authService.getLoggedIn()); // returns true
    });

$scope.$watch('loggedInUser', function () {
    console.log('loggedInUser has changed ' + $rootScope.loggedInUser);
    // This runs once when we set $rootScope.loggedInUser in the .run() of the app, output is: 'loggedInUser has changed false' 
    // then when we have successfully logged in again, output is 'loggedInUser has changed true'
});

好的，所以当我更改$ rootScope.loggedInUser时，菜单视图中<div>的条件没有更新，我的方法做错了，有人可以给我一些建议或更正我的方法。感谢

Answer 1

如果某个道具更新了，只要它在正确的范围内，您就不必在Angular中做任何特殊的事情来更新视图。我为你提供了一个Plunkr，它表明你不必做任何特别的事情来刷新视图。

http://plnkr.co/edit/B6kUwJdA4lRKkjAItSFO?p=preview

你不必做手表，你不必做任何事情。这就是Angular的力量。而且，你在rootcope中设置东西很奇怪。我的建议是查看我的示例并修改/重构您的代码。还有，像这样的东西：

ng-show="!authService.getLoggedIn()"

不是推荐的做事方式。您可以拥有一个控制器，您可以在其中说：

$scope.userLoggedIn = autService.getLoggedIn();

然后在你看来：

ng-show="userLoggedIn"

你也可以看看这个plunkr：

http://plnkr.co/edit/aRhS0h7BgpJJeRNvnosQ?p=preview

用户操作完成后更新AngularJS View

1 个答案: