【问题标题】:Detect change of status between services and controllers in AngularJS检测AngularJS中服务和控制器之间的状态变化
【发布时间】:2013-11-06 23:08:14
【问题描述】:

我是 AngularJS 的新手,我有一个小问题,请注意,我仍处于 AngularJS 开发的最初几周,我还没有完全理解所有内容,所以请不要笑。

好的,我有一个身份验证模块,其中包含我称为authService 的服务。在authService 中,我设置了值this.isAuthenticated 以确定用户是否已登录,这是一个简单的示例(我已删除所有内容,因为它工作正常。

this.isAuthenticated = function () {
            // i have removed a great deal of code to keep this simple but we use $http and a rest service...
           // more code then ... 
            if (loggedInUser == null) {
                return false;
            } else {
                return true;
            }
        };

在另一个名为 ideasCtrl 的控制器中,我想检查用户是否已登录,并且我希望观察状态是否发生变化,以便我可以采取相应的行动……这是我的一部分 @ 987654327@

// please note that authService is correctly injected / referenced
$scope.isAuthenticated = authService.isAuthenticated();
    console.log($scope.isAuthenticated);

$scope.$watch('isAuthenticated', function() {
    console.log('hey, isAuthenticated has changed!');
});

我以公共用户的身份查看我的应用程序,然后登录(登录表单只是应用程序顶部的一个视图,我使用 ng-view 导入)$scope.$watch('isAuthenticated'... 没有被触发,被解雇或任何东西。如何广播此内容或确保捕获更改事件。

如果无法提供答案,请随时向我点头以正确的方向进行调查(如主题或开发领域)。我意识到我的代码示例非常糟糕。

【问题讨论】:

  • 与您的问题不完全相关:您提到您使用ng-view 导入登录表单。您的页面中只能有 1 个ng-view,这是您的应用程序的主体,您可以在其中加载在$routeProvider 中注册的“路线”。顺便说一句,您可以查看this posting 以获取经过身份验证/公开的场景。

标签: angularjs


【解决方案1】:

正如实现的那样,$scope.isAuthenticated 在初始化时接收一个值并永远保留它。所以$watch 不会再次被触发,因为被监视的表达式永远不会改变!由于authService.isAuthenticated()快,大家可以直接看:

$scope.$watch(
    function() { return authService.isAuthenticated(); },
    function(newval, oldval) {
        // state changed
    }
);

【讨论】:

  • 如果我希望我的所有控制器都可以访问此更新的服务值,我该如何使用它?我不想每次都为每个控制器编写一个 $watch。
【解决方案2】:

正如@Nikos 所说,您只调用一次authService.isAuthenticated(),因此$scope.isAuthenticated 不会改变,$watch 不会做任何事情。但是,如果 authService 依赖于您提到的 API 调用,您将不想重复运行它。我建议在不同的身份验证事件上发出事件并在您的控制器中监听它们。例如,在您的服务中的登录事件中,您可能会这样做:

$rootScope.$broadcast("auth:login");

然后在你的控制器中:

$scope.$on('auth:login', function() {
  console.log('hey, isAuthenticated has changed (user logged in)!');
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-09-25
    • 1970-01-01
    相关资源
    最近更新 更多