javascript - Angularjs 用户界面路由器 : conditional nested name views

Question

按照教程:

http://scotch.io/tutorials/javascript/angular-routing-using-ui-router

和演示:

http://scotch.io/demos/angular-ui-router#/about

在关于页面上，有两个命名 View ，“columnOne”和“columnTwo”。

是否可以有条件地实例化命名 View ，如果某些条件失败，则命名 View “columnOne”及其 Controller 不应实例化，并且其位置在页面上留空。

我想避免在不希望加载 Controller 的情况下使用 ng-if，从而节省 Controller 可能拥有的 API 调用。

类似于在 resolve block 中拒绝但用于同级命名 View 。

Answer 1

UI Router 为我们提供了两个“秘方”，templateProvider函数和 $templateFactory服务。

The template provider function which can be injected, has access to locals, and must return template HTML.

因此，在此函数中，您可以设置条件以呈现命名 View 的模板。 templateProvider() 只允许我们返回 HTML，但假设我们想要返回一个模板是为了可读性或您可能有的任何原因。这就是我们使用 $templateFactory 并对其调用 .fromUrl() 的地方:

$templateFactory.fromUrl() loads a template from the a URL via $http and $templateCache.

views: {
  'columnOne': {
    controller: 'SomeCtrl',
    templateProvider: function($templateFactory) {
      // if condition is true, return the template for column one
      return $templateFactory.fromUrl('path/to/template.html');
    }
  },
  'columnTwo': {
    controller: 'MaybeSomeOtherCtrl',
    templateProvider: function($templateFactory) {
      // if condition is true, return the template for column two
      return $templateFactory.fromUrl('path/to/template.html');
    }
  }
}