AngularJS：将角度服务属性绑定到范围

Question

方案

• 我有一个服务UserService来维护用户的（布尔）sessionStatus。
• 视图有条件地显示ng-show=sessionStatus上的[LOGOUT]（即如果未登录（false），则不显示）。
因此sessionStatus的{​​li> ViewController应该始终与UserService的那个相匹配...对吗？
• 如果您在可见时单击[注销]，它会执行一些逻辑错误，sessionStatus值更改，并且视图应使用ng-show...的新结果进行更新。

问题

1. 目前，点击注销似乎没有更新var UserService.sessionStatus？
2. 当UserService.logout（）发生并更改UserService.sessionStatus时，如何更新$ scope.sessionStatus？
   • 如何将更改的$ scope映射到ng-show？

文件

视图

    <a ng-show="sessionStatus" ng-click="logout()">Logout</a>

的ViewController

    app.controller('AppController', function($scope, $interval, $http, UserService) {
      $scope.logout = function() { UserService.logout(); }

      // This ain't working
      $scope.$watch(UserService.sessionStatus, function() {
          $scope.sessionStatus = UserService.sessionStatus;
      });
    });

UserService

注意：appUser是HTML头中注入的全局变量（一个hacky修复，直到我得到会话/ cookie的东西正常工作）

  app.factory('UserService', function($http) {
    var pre;
    var sessionStatus;

    function init() {                   // Logged in  : Logged out             
      pre = appUser.user != undefined ? appUser.user  : { name: 'Logged out', uid: '0' };
      sessionStatus = pre.uid != "0"  ? true          : false;
    }

    function resetSession() { appUser = null; init(); }

    init();

    return {
      sessionStatus: function() { return sessionStatus; }, // update on change!

      logout: function() {
        $http.get("/logout").then(function (data, status, headers, config) {
          resetSession();
        })
      }
    };
  });

Answer 1

而不是watch，只需使用从function返回会话状态的范围service。

$scope.sessionStatus = function() {
    return userService.sessionStatus();
};

您的退出链接如下所示：

<a ng-show="sessionStatus()" ng-click="logout()">Logout</a>

为您的功能提供了一个精简的Plunker：http://plnkr.co/edit/u9mjQvdsvuSYTKMEfUwR?p=preview

Answer 2

使用范围函数更清晰，并且是“正确”的方法。然而，为了完整起见，您还可以修理手表：

$scope.$watch(function () {
    return UserService.sessionStatus;
}, function() {
    $scope.sessionStatus = UserService.sessionStatus;
});

$watch method的第一个参数采用WatchExpression，可以是字符串或方法。

但同样，$ watch不应该用在控制器中。使用建议的范围方法更干净，更容易测试。