UI路由器:在templateUrl功能异步数据 [英] ui-router: async data in templateUrl function
问题描述
我碰到与路由器的用户界面相当新颖的问题。基本上,我想我的查询API为模板的URL,将其存储和返回为一个资源
对象。的问题是似乎 templateUrl
函数返回为未定义。我的code是如下:
I've run into quite a novel problem with ui router. I'm basically trying to query my API for a template url, which is stored and returned as a Resource
object. The problem, is it seems that the templateUrl
function is returning as undefined. My code is as follows:
(function() {
'use strict';
angular.module('myApp')
.config(function ($stateProvider, PageProvider, $httpProvider) {
$stateProvider
.state('core', {
abstract: true,
templateUrl: 'app/core/core.index.html',
controller: 'CoreController',
controllerAs: 'vm'
})
/* Parent page view */
.state('core.page', {
url: '/:slug',
views: {
'page_content@core': {
templateUrl: function(params) {
var slug = params.slug;
// only need to load core template
var url = 'assets/templates/' + slug + '.html';
return url;
},
controller: 'PageController',
controllerAs: 'vm'
}
}
})
.state('core.page.child', {
url: '/:child',
views: {
'page_content@core': {
templateUrl: function($stateParams) {
PageProvider
.$get() // $get() returns Page service
.findOne($stateParams.child)
.$promise
.then(function(data){
return data.template.url;
});
}
}
}
});
});
})();
我设置一个断点为我的国家,core.page.child',看什么变量在范围可用,我发现了一些很奇怪:
I set a breakpoint for my state, 'core.page.child', to see what variables were available in the scope, and I found something quite strange:
我真的不明白为什么会这样,因为。然后(CB)
只调用后的承诺得到解决,这意味着它应该返回正确的值如预期 - 但事实并非如此。
I really don't understand why this is happening, since .then(cb)
is only called AFTER the promise is resolved, which means it should return the correct value as expected - but it doesn't.
任何帮助将是非常美联社preciated。
Any help would be much appreciated.
编辑:我要补充一点正在发生的事情是,UI的路由器是根本无法加载我的模板在所有 - 我得到一个空的用户界面视图
。我最初想这可能是我的 $ stateProvider
配置有问题,但是这似乎并不如此。
I should add that what is happening is that ui-router is simply not loading my template at all - I get an empty ui-view
. I had initially thought it might be a problem with my $stateProvider
configuration, but that doesn't seem to be the case.
EDIT2:我挖了一点到基于调用堆栈上的源$ C $ C。看来你们俩是正确的 - UI的路由器不具有承诺的工作。
I dug a little into the source code based on the call stack. It seems that both of you are correct - ui-router does NOT work with promises.
/**
* @ngdoc function
* @name ui.router.util.$templateFactory#fromConfig
* @methodOf ui.router.util.$templateFactory
*
* @description
* Creates a template from a configuration object.
*
* @param {object} config Configuration object for which to load a template.
* The following properties are search in the specified order, and the first one
* that is defined is used to create the template:
*
* @param {string|object} config.template html string template or function to
* load via {@link ui.router.util.$templateFactory#fromString fromString}.
* @param {string|object} config.templateUrl url to load or a function returning
* the url to load via {@link ui.router.util.$templateFactory#fromUrl fromUrl}.
* @param {Function} config.templateProvider function to invoke via
* {@link ui.router.util.$templateFactory#fromProvider fromProvider}.
* @param {object} params Parameters to pass to the template function.
* @param {object} locals Locals to pass to `invoke` if the template is loaded
* via a `templateProvider`. Defaults to `{ params: params }`.
*
* @return {string|object} The template html as a string, or a promise for
* that string,or `null` if no template is configured.
*/
this.fromConfig = function (config, params, locals) {
return (
isDefined(config.template) ? this.fromString(config.template, params) :
isDefined(config.templateUrl) ? this.fromUrl(config.templateUrl, params) :
isDefined(config.templateProvider) ? this.fromProvider(config.templateProvider, params, locals) :
null
);
};
看来,我要么必须使用 $ stateProvider.decorator
,或劈UI路由器的核心。我想我可能只是做后者,并提交一个PR。我将张贴在github上回购这个问题为好,看是否在UI路由器球队任何人有这个问题的解决方案。
It seems that I'll either have to use $stateProvider.decorator
, or hack ui-router's core. I think I might just do the latter and submit a PR. I'll be posting this issue on the github repo as well, to see if anyone on the ui-router team has a solution for this problem.
推荐答案
您可以使用决心
和 templateProvider
来做到这一点。
you can use a resolve
and templateProvider
to do this.
.state('child', {
url: '/:child',
resolve: {
childTemplate: function ($stateParams, $templateRequest) {
return $templateRequest($stateParams.child + ".html");
}
},
templateProvider: function(childTemplate) {
return childTemplate;
}
});
这将创建它采用了解析 $ stateParams
来获取模板(我使用的 $ templateRequest
获取,添加到 $ templateCache
,并且都在一个返回的内容)。然后,解析模板内容被注入到该视图的templateProvider
This creates a resolve which uses the $stateParams
to fetch the template (I'm using the $templateRequest
to fetch, add to $templateCache
, and return the contents all in one). Then, the resolved template content is injected into the view's templateProvider.
这篇关于UI路由器:在templateUrl功能异步数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!