angularjs - AngularJS - 根据服务更改模板

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';
        }
    );
}]);