尝试基于常量在控制器中动态设置 templateUrl

问题描述

我想根据我在 angularjs 引导程序中定义的预设常量更改与控制器关联的 templateUrl.我不知道如何改变它.我已经尝试过 UrlRouteProvider，但无法弄清楚如何使用它从文件系统中提取 html.我被困在 templateUrl 上.

I want to change the templateUrl associated with controller based on a preset constant that I've defined in my angularjs bootstrap. I can't figure out how to change that. I've experimented with UrlRouteProvider but have not been able to figure out how to pull the html in from the file system with that. I'm stuck on templateUrl.

在下面的代码中，输出首先显示svcc确实传递到第一个函数的console.out中，但在templateUrl定义函数中，CONFIG未定义.

In the below code, the output first shows that "svcc is indeed passed into the first function's console.out but in the templateUrl definition function, CONFIG is undefined.

我愿意接受其他方式来做到这一点.

I'm open to other ways to do this.

    var app = angular.module('svccApp', [
        'ui.router'
    ]);

    var myConstant = {};
    myConstant.codeCampType = "svcc";
    app.constant("CONFIG", myConstant);

    app.config(['$stateProvider', '$urlRouterProvider','CONFIG',
        function ($stateProvider, $urlRouterProvider,CONFIG) {
            console.log(CONFIG.codeCampType);
            $stateProvider
                .state('home', {
                    url: '/home',
                    //templateUrl: 'index5templateA.html',   (THIS WORKS)
                    templateUrl: function(CONFIG) {
                        console.log('in templateUrl ' + CONFIG.codeCampType);
                        if (CONFIG.codeCampType === "svcc") {
                            return 'index5templateA.html';
                        } else {
                            return 'index5templateB.html';
                        }
                    },
                    controller: function ($state) {
                    }
                });
        }]);

推荐答案

我在这里创建了一个 plunker你快到了，只是语法是'templateProvider':

I created a plunker hereYou are almost there, just the syntax is 'templateProvider':

.state('home', {
    url: '/home',
    //templateUrl: 'index5templateA.html',   (THIS WORKS)
    // templateUrl: function(CONFIG) {
    templateProvider: function(CONFIG) {
    ...

来自文档的片段:

TemplateUrl
... templateUrl 也可以是一个返回 url 的函数.它需要一个预设参数，stateParams，它没有被注入.

模板提供者
或者，您可以使用 模板提供程序 函数，该函数可以注入，可以访问本地人，并且必须返回模板 HTML，如下所示:

TemplateProvider
Or you can use a template provider function which can be injected, has access to locals, and must return template HTML, like this:

所以在我们的例子中，这将是实现:

So in our case, that would be the implementation:

 $stateProvider
    .state('home', {
        url: '/home',
        //templateUrl: 'index5templateA.html',   (THIS WORKS)
        templateProvider: function(CONFIG, $http, $templateCache) {
            console.log('in templateUrl ' + CONFIG.codeCampType);
            
            var templateName = 'index5templateB.html';
            
            if (CONFIG.codeCampType === "svcc") {
                 templateName = 'index5templateA.html';
            } 
            var tpl = $templateCache.get(templateName);
            
            if(tpl){
              return tpl;
            }
            
            return $http
               .get(templateName)
               .then(function(response){
                  tpl = response.data
                  $templateCache.put(templateName, tpl);
                  return tpl;
              });
        },
        controller: function ($state) {
        }
    });

查看示例

还要检查:

• Angular UI Router:根据父解析对象决定子状态模板
• Angular 和 UI-Router，如何设置动态模板 URL

这篇关于尝试基于常量在控制器中动态设置 templateUrl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！