试图动态设置控制器templateUrl基于恒 [英] Trying to Dynamically set a templateUrl in controller based on constant

问题描述

我想改变与基于常量，我在angularjs引导已经定义了一个preSET控制器相关的templateUrl。我无法弄清楚如何改变这种状况。我已经尝试过UrlRouteProvider但一直没能弄清楚如何从文件系统拉HTML英寸我卡上templateUrl。

在低于code，产量第一显示，SVCC确实传递到第一个函数的console.out但在templateUrl定义功能，CONFIG是不确定的。

我接受其他方式来做到这一点。

  VAR应用= angular.module（'svccApp'，[
        ui.router
    ]）;    变种myConstant = {};
    。myConstant codeCampType =SVCC;
    app.constant（CONFIG，myConstant）;    的app.config（['$ stateProvider'，'$ urlRouterProvider'，'配置'，
        功能（$ stateProvider，$ urlRouterProvider，CONFIG）{
            的console.log（CONFIG codeCampType）;
            $ stateProvider
                .STATE（'家'，{
                    网址：'/家，
                    // templateUrl：index5templateA.html，（这部作品）
                    templateUrl：功能（CONFIG）{
                        的console.log（'在templateUrl'+ CONFIG codeCampType）;
                        如果（配置codeCampType ===SVCC）{
                            返回'index5templateA.html';
                        }其他{
                            返回'index5templateB.html';
                        }
                    }，
                    控制器：函数（$州）{
                    }
                }）;
        }]）;
 

解决方案

我创建了一个 plunker这里
你几乎那里，只是语​​法的 'templateProvider

  .STATE（'家'，{
    网址：'/家，
    // templateUrl：index5templateA.html，（这部作品）
    // templateUrl：功能（CONFIG）{
    templateProvider：功能（CONFIG）{
    ...
 

从片段DOC：

模板

  

TemplateUrl 结果
  ... templateUrl 也可以是返回URL的功能。 它需要一个preSET参数， stateParams ，这是不注入。

  
  

TemplateProvider 结果
  或者你也可以使用模板提供商函数可以注射，先后获得当地人，并且必须返回HTML模板，像这样的：

所以，对我们来说，这将是实现：

  $ stateProvider
    .STATE（'家'，{
        网址：'/家，
        // templateUrl：index5templateA.html，（这部作品）
        templateProvider：功能（CONFIG，$ HTTP，$ templateCache）{
            的console.log（'在templateUrl'+ CONFIG codeCampType）;            VAR TEMPLATENAME ='index5templateB.html';            如果（配置codeCampType ===SVCC）{
                 TEMPLATENAME ='index5templateA.html';
            }
            VAR TPL = $ templateCache.get（TEMPLATENAME）;            如果（TPL）{
              返回第三方物流;
            }            返回$ HTTP
               获得（TEMPLATENAME）
               。然后（功能（响应）{
                  TPL = response.data
                  $ templateCache.put（TEMPLATENAME，TPL）;
                  返回第三方物流;
              }）;
        }，
        控制器：函数（$州）{
        }
    }）;
 

检查〔实施例这里

另外，请查阅：

• 角UI路由器：父解析对象的基础上，决定孩子状态模板


• 角和UI的路由器，如何设置一个动态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.

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) {
                    }
                });
        }]);

解决方案

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) {
    ...

Snippet from doc:

Templates

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

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) {
        }
    });

Check the examle here

Also check:

• Angular UI Router: decide child state template on the basis of parent resolved object
• Angular and UI-Router, how to set a dynamic templateUrl

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