Javascript 基于$stateProvider中的解析呈现模板

考虑以下代码：

bank.config(function($stateProvider) {
  $stateProvider
    .state('main.bank', {
      url: '/',
      controller: 'BankCtrl',
      resolve: {
        money: function(bankResource) {
          return bankResource.getMoney();
      },
      templateUrl: 'bank/bank.html'
    });
});

上面我在解析完成后呈现了

bank.html

模板

我想根据我的

money

函数返回的内容呈现特定的模板

例如：

如果

money

返回包含项目的对象，则呈现

bank.html

如果

money

返回空对象，则返回

empty bank.html

---

如何在$stateProvider中实现这一点？或者它在指令中更有意义吗？

将您的

解析

代码移动到父控制器，为

bank.html

和

empty bank.html

分别创建两个子路由，并基于解析的结果进行路由，类似这样-

.state('main', {
  url: '/',
  controller: 'MainCtrl',
  resolve: {
    money: function(bankResource) {
      return bankResource.getMoney();
  }
})
.state('main.bank', {
  url: '/blank',
  controller: 'BankCtrl',
  templateUrl: 'bank/bank.html'
})
.state('main.emptybank', {
  url: '/emptyblank',
  controller: 'EmptyBankCtrl',
  templateUrl: 'bank/empty-bank.html'
});

---

将解析结果注入控制器，并根据输出更改状态。

在主状态的index.html中，根据money变量切换视图。E.a.：

.state('main', {
  url: '/',
  controller: 'MainCtrl'
})

在MainCtrl中，根据函数的输出设置变量：

$scope.money = "bank"

或

然后在index.html中调用一个视图：

<div ng-view="{{$scope.money}}"></div>

对于任何语法错误，请提前道歉。在我的手机上从头开始打

---

但这应该可以解决您的问题，并在过程中使其更加“Angularesque”：-

如果我刷新页面，此解决方案将不再有效。更改控制器中的状态似乎不起作用，因为控制器只实例化一次。刷新页面时，不会再次调用控制器，因此不会调用“更改状态”逻辑，视图将变为空白。如果刷新页面，则始终首先调用父控制器，并重新执行解析代码。

<div ng-view="{{$scope.money}}"></div>

.state('main.bank', {
  url: '/bank',
  views: {
     bank: {
    controller: 'BankCtrl',
    templateUrl: 'bank/bank.html'
    },
    emptybank: {
    controller: 'EmptyBankCtrl',
    templateUrl: 'bank/emptybank.html'
    }
  }
})