根据 $stateProvider 中的 resolve 渲染模板

Question

考虑这段代码：

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

上面我在 resolve 完成执行后渲染了 bank.html 模板。

我想根据从我的 money 函数中 return 编辑的内容呈现特定模板。

示例：

如果 money return 是一个带有项目的对象，渲染 bank.html

如果moneyreturn是一个空对象，那么returnempty-bank.html

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

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

将 resolve 的结果注入你的控制器并根据输出改变状态。

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

对于任何语法错误，我们深表歉意。在我的手机上从头打字 phone。

但这应该可以解决您的问题，并且会在进行中使问题变得更多 "Angularesque" :-)

根据 $stateProvider 中的 resolve 渲染模板

Render a template based on the resolve in $stateProvider

javascript

angularjs

angularjs-directive

angular-ui-router

resolve