Question

遵循教程：

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

和演示：

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

在about页面上，有两个命名视图，＆＃34; columnOne＆＃34;和＆＃34; columnTwo＆＃34;。

是否可以有条件地实例化命名视图，如果某些条件未通过命名视图＆＃34; columnOne＆＃34;并且它的控制器不应该实例化，并且它的位置在页面上留空。

我想避免使用ng-if，因为不希望控制器加载，从而节省控制器可能具有的API调用。

类似于在解决方案块中拒绝但是对于兄弟的命名视图。

Answer 1

UI路由器为我们提供了两个“秘密调料”，templateProvider功能和$templateFactory服务。

可以注入的模板提供程序函数可以访问本地人，必须返回模板HTML。

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

$ templateFactory.fromUrl（）通过$ http和。从URL加载模板 $ 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');
    }
  }
}

Angularjs ui-router：条件嵌套名称视图

1 个答案: