角度服务和控制器共同范围

Question

我有AuthService并希望在某些控制器中使用此服务。

我想在我的前端显示或隐藏“注销”按钮，取决于$ scope.isLoggedIn。

我的前端代码：

<md-button ng-if="isLoggedIn" class="md-button" ng-click="signOut()" aria-label="Logout">
    Logout
</md-button>

和我的signOut()功能：

$scope.signOut = function() {
    AuthenticationService.signOut().then(function() {
        $location.path('/');
    });
};

身份验证服务包含以下功能：signIn()，signOut()和字段.isLoggedIn = true|false。

我想在控制器中更新我的变量，$scope.isLoggedIn取决于AuthenticationService.isLoggedIn。但如果我试试这个：

$scope.isLoggedIn = AuthenticationService.isLoggedIn

它工作正常，但只有当我加载网站时。因此，如果用户已登录，则变量$scope.isLoggedIn为true，如果用户未登录变量$scope.isLoggedIn，则为false。

但如果AuthenticationService.isLoggedIn在应用程序运行时发生更改，则不会更改$scope.isLoggedIn。

是否可以在服务和控制器之间保留此引用？或者我应该以另一种方式做到这一点？

Answer 1

你必须这样做：

$scope.authService = AuthenticationService;

在您看来，请通过以下方式访问它：

authService.isLoggedIn

你当前的方式不起作用的原因是你最初设置一个布尔值，一个值类型，而不是像对象一样的引用类型。因此，当更新isLoggedIn时，您的范围变量不知道。当您将其设置为对象时，在您的情况AuthenticationService中，将保留对该对象的引用，并且任何更新都会反映在视图中。

Answer 2

在控制器中使用 $ watch

$scope.$watch(function(){return AuthenticationService.isLoggedIn}, function(newval, oldval){
   $scope.isLoggedIn = newval;
});

Answer 3

简单地将其变成一个函数：

$ scope.isLoggedIn

$ scope.isLoggedIn = function（）{return AuthenticationService.isLoggedIn;}