Question

我对Angular很新，我觉得很难想到Angular的方式。

我已经注册了一个SessionService，它在登录时加载用户对象。每个控制器都可以依赖于SessionService，因此我可以使用某种访问控制。

app.factory('SessionService',['$resource', function($resource){

    var service = $resource('/session/:param',{},{
      'login': {
        method: 'POST'
      }
    });

    var _user = { authorized: false };

    function getUser() {
      return _user;
    }

    function authorized(){
      return _user.authorized === true;
    }

    function unauthorized(){
      return _user.authorized === false;
    }

    function login(newUser,resultHandler) {
      service.login(
        newUser,
        function(res){
          _user = (res.user || {});
          _user.authorized = res.authorized;
          if(angular.isFunction(resultHandler)) {
            resultHandler(res);
          }
        }
      );
    }
    return {
      login: login,
      authorized: authorized,
      getUser: getUser
    };
  }]);

...这就是我从控制器访问SessionService的方式：

app.controller('SidebarCtrl', ['$scope', 'SessionService', function($scope, SessionService) {
  $scope.template = '/templates/sidebar/public.html';
  if(SessionService.authorized()){
      $scope.template = '/templates/sidebar/menu.html';  // <-- ???
  }
}]);

...这里是html文件：

<div ng-controller="SidebarCtrl">
  <div ng-include src="template"></div>
</div>

以下是我的问题：如何使SidebarCtrl的模板依赖于SessionService.authorize？所以边栏根据用户登录或不登录显示正确的内容。

我希望这对你有用。

Answer 1

您需要$watch SessionService.authorized()。因此将控制器更改为：

app.controller('SidebarCtrl', ['$scope', 'SessionService', function($scope, SessionService) {
    $scope.template = null;
    $scope.$watch(
        function() {
            return SessionService.authorized();
        },
        function(authorized) {
            if( authorized ) $scope.template = '/templates/sidebar/menu.html';
            else $scope.template = '/templates/sidebar/public.html';
        }
    );
}]);

AngularJS - 根据服务更改模板

1 个答案: