Angularjs ui-router:条件嵌套名称视图 [英] Angularjs ui-router : conditional nested name views

问题描述

按照教程:

http://scotch.io/tutorials/javascript/angular-路由使用用户界面路由器

和演示:

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

在关于页面上，有两个命名视图，columnOne"和columnTwo".

On the about page , there are two named views, "columnOne" and "columnTwo".

是否可以有条件地实例化命名视图，如果某些条件失败，命名视图columnOne"及其控制器不应实例化，其位置在页面上留空.

Is it possible to instantiate the named views conditionally , If some condition fails the named view "columnOne" and its controller shouldnt instantiate and its place be left empty on the page.

我想避免在不希望控制器加载的情况下使用 ng-if，从而节省控制器可能进行的 API 调用.

I would like to avoid the use of ng-if on the as do not wish the controller to load thus saving on the API calls the controller might have.

类似于在解析块中拒绝但对于兄弟命名视图.

Something like rejecting in a resolve block but for sibling named views.

推荐答案

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

UI Router provides us with two "secret sauces", templateProvider function and the $templateFactory service.

可以注入的模板提供者函数，可以访问本地，并且必须返回模板 HTML.

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

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

So, within this function you can set your conditionals to render a template for a named view. templateProvider() only allows us to return HTML, but let's say we want to return a template for the sake of readability or whatever reason you might have. That's where we'd use $templateFactory and call .fromUrl() on it:

$templateFactory.fromUrl() 通过 $http 从 URL 加载模板，然后$templateCache.

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

这篇关于Angularjs ui-router:条件嵌套名称视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！