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

Question

脚本

• 我有一个UserService维护sessionStatus用户(布尔值)的服务.
• 视图有条件地显示[LOGOUT] ng-show=sessionStatus(即如果未登录(false),则不显示).
• sessionStatusViewController因此,应该总是匹配UserService......对吗？
• 如果在可见时单击[LOGOUT],它会执行一些逻辑异常,sessionStatus值更改,并且视图应该更新为新的结果ng-show....

问题

1. 目前,单击logout似乎没有更新var UserService.sessionStatus？
2. 当UserService.logout()发生并更改UserService.sessionStatus时,如何更新$ scope.sessionStatus？
   • 如何将更改的$ scope映射到ng-show？

档

视图

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

视图控制器

    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

而不是a 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