根据 $stateProvider 中的解析渲染模板答案

【问题标题】：Render a template based on the resolve in $stateProvider根据 $stateProvider 中的解析渲染模板
【发布时间】：2015-04-02 19:35:17
【问题描述】：

考虑这段代码：

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 中实现这一点？或者将它放在指令中是否更有意义？

【问题讨论】：

标签： javascript angularjs angularjs-directive angular-ui-router resolve

【解决方案1】：

将您的resolve 代码移动到父控制器，为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'
});

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

【讨论】：

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

【解决方案2】：

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

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

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

$scope.money = "bank"

或

$scope.money = "emptybank"

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

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

如有任何语法错误，请提前道歉。在我的手机上从头输入。

但这应该可以解决您的问题，并且在进行中使其更加“Angularesque”:-)

【讨论】：