Question

我有两个模板a.html和b.html。现在a.html用于登录用户，b.html用于未登录用户。身份验证是通过在单独的子域上运行的api进行的。现在我有一个电话，告诉一个人是否在范围内进行了身份验证。

我如何根据它选择加载模板。一种方法是我加载b.html并有条件地重定向经过身份验证的用户，但这不是我要找的东西。这是我的ngRoute代码

var app = angular.module('app',['ngRoute']);

app.config(function ($routeProvider,$locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
    .when('/',{
            templateUrl : '/templates/b.html',
            controller  : 'mainController'
        })
    .otherwise({
        templateUrl : 'templates/404.html',
        controller  : 'mainController'
    });
});

app.controller('mainController', function($scope) {

});

Answer 1

以下代码可以某种方式满足您的要求，但实际上有点棘手，因为我使用ng-include而不是直接设置templateUrl。

关键是使用resolve param in $routeProvider。当你将$ promise作为成员传递给它时，路由器会等待它们全部解决。

 app.controller('MainController', ['$scope','loadedTemplate',function ($scope,loadedTemplate) {
     //inject the template from the resolve function
     $scope.loadedTemplate = loadedTemplate;
 }]);

//Service to keep loginStatus
app.factory("loginService",function(){
    return {
      isLogin:false,
      loginStatusFetched:false,
  }
})

app.config(['$routeProvider',function ($routeProvider) {

    $routeProvider.
    when('/', {
        template: "<div ng-include='loadedTemplate'></div>",
        controller: 'MainController',
        resolve:{
          loadedTemplate:function($q, $http,$route,loginService) {
              console.log("fetching login status");
              if(loginService.loginStatusFeteched){
                    if(loginService.isLogin){
                          return "a.html"
                    }
                    else{
                            return "b.html"
                    }
              }
              console.log("fetching remote authentication");
              var deferred = $q.defer();
              $http({method: 'GET', url: 'http://jsonplaceholder.typicode.com/posts/1'})
                  .success(function(data) {

                      //update the login status here
                      loginService.loginStatusFeteched = true;
                      loginService.isLogin = true;
                      if(loginService.isLogin){
                        deferred.resolve("a.html");
                      }
                      else{
                        deferred.resolve("b.html");
                      }
                  })
                  .error(function(data){
                  //error
                      deferred.resolve("b.html");
                  });

              return deferred.promise;  
          }
        }
    })
}]);

我试图通过将templateUrl设置为函数来实现你所需要的，但它只需要routeParams，当resolve中的$ promise得到解决时，这个函数已经被执行了，没有办法更改当前加载的模板。

您还可以尝试其他选择。您可以使用angular-ui-router代替ng-route来处理状态更改，其中您可以设置子状态并有条件地使用相同的网址显示它们。

但我相信可能有更好的方法来实现你想要的。如果有人有任何更好的解决方案，请告诉我。

（可选）在ngRoute

1 个答案: