Question

考虑以下代码：

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中实现此目的？或者甚至更有意义的是它在指令中？

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

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

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

提前抱歉任何语法错误。在我的手机上从头上输入。

但是这应该可以解决你的问题并且在进步中使它更加“Angularesque”： - ）

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

2 个答案: