javascript - AngularJS:将 Angular 服务属性绑定(bind)到范围

设想

我有一个服务UserService来维护用户的( bool )sessionStatus。

该 View 有条件地在ng-show=sessionStatus上显示[注销](即，如果未登录(假)，则不显示)。

因此，sessionStatus的

ViewController应该始终与UserService的匹配...是吗？

如果在可见时单击[LOGOUT]，它将执行一些麻烦的事情，更改sessionStatus的值，并且 View 应使用ng-show...的新结果进行更新。

问题

当前，单击注销似乎不会更新var UserService.sessionStatus吗？

当出现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;
      });
    });

用户服务

注意:appUser是在HTML头中注入(inject)的全局变量(一个hacky修复程序，直到我使 session /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();
        })
      }
    };
  });

最佳答案

代替watch，只需使用有作用域的function即可从service返回 session 状态。

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

您的注销链接如下所示:

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

为您的功能精简的Plunker:http://plnkr.co/edit/u9mjQvdsvuSYTKMEfUwR?p=preview

关于javascript - AngularJS:将 Angular 服务属性绑定(bind)到范围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26344022/