AngularJS ui-router:条件嵌套名称视图 [英] Angularjs ui-router : conditional nested name views
问题描述
按照教程进行:
http://scotch.io/tutorials/javascript/angular-使用ui路由器路由
和演示:
http://scotch.io/demos/angular-ui-router#/关于
在About页面上,有两个命名视图,即"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.
类似于在resolve块中拒绝,但用于命名视图的同级.
Something like rejecting in a resolve block but for sibling named views.
推荐答案
UI路由器向我们提供了两种秘密调味料", $ 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屋!