为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

幕布斯6054654 2020-01-05 04:00:35

我想基于我在angularjs引导程序中定义的预设常数来更改与控制器关联的templateUrl。我不知道该如何更改。我已经尝试过UrlRouteProvider,但无法弄清楚如何使用该文件从文件系统中提取html。我被卡在templateUrl上。


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


我愿意采取其他方式来做到这一点。


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

                    }

                });

        }]);



查看完整描述

3 回答

?
手掌心

我在这里创建了一个插件, 您几乎在这里,只是语法是'templateProvider':


.state('home', {

    url: '/home',

    //templateUrl: 'index5templateA.html',   (THIS WORKS)

    // templateUrl: function(CONFIG) {

    templateProvider: function(CONFIG) {

    ...

doc的片段:


范本

TemplateUrl

... templateUrl也可以是返回url的函数。它采用一个预设参数stateParams,该参数不会被注入。


TemplateProvider

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


因此,在我们的例子中,将是实现:


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

        }

    });

在这里检查例子



查看完整回答
反对 回复 2020-01-06
?
慕斯709654

我必须添加另一个答案,该问题与angular 1.3的全新功能有关


$ templateRequest


该$templateRequest服务使用来下载提供的模板$http,成功后,将内容存储在中$templateCache。


用法


$templateRequest(tpl, [ignoreRequestError]);

参数 -tpl字符串-HTTP请求模板URL


ignoreRequestError(可选)boolean- 请求失败或模板为空时是否忽略异常

和更新的朋克


templateProvider: function(CONFIG, $templateRequest) {

    console.log('in templateUrl ' + CONFIG.codeCampType);


    var templateName = 'index5templateB.html';


    if (CONFIG.codeCampType === "svcc") {

         templateName = 'index5templateA.html';

    } 


    return $templateRequest(templateName);

},



查看完整回答
反对 回复 2020-01-06
?
交互式爱情

var app = angular.module('svccApp', [

        'ui.router'

    ]);


    var myConstant = {};

    myConstant.codeCampType = "svcc";


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

                        if (myConstant.codeCampType === "svcc") {

                            return 'index5templateA.html';

                        } else {

                            return 'index5templateB.html';

                        }

                    },

                    controller: function ($state) {

                    }

                });

        }]);



查看完整回答
反对 回复 2020-01-06

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信