尝试基于常量在控制器中动态设置模板Url [英] Trying to Dynamically set a templateUrl in controller based on constant

问题描述

我想根据我在 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 here You 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，它不被注入.

TemplateUrl
... templateUrl can also be a function that returns a url. It takes one preset parameter, stateParams, which is NOT injected.

模板提供者
或者您可以使用 模板提供程序 函数，该函数可以注入，可以访问本地，并且必须返回模板 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，如何设置动态templateUrl

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