javascript - Angularjs ui 路由器 : 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 调用。

类似于在解析 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');
    }
  }
}