Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trying to Dynamically set a templateUrl in controller based on constant

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) {
                    }
                });
        }]);
like image 794
Peter Kellner Avatar asked Jan 05 '15 06:01

Peter Kellner


2 Answers

I have to add another answer, related to brand new feature of angular 1.3

$templateRequest

The $templateRequest service downloads the provided template using $http and, upon success, stores the contents inside of $templateCache.

Usage

$templateRequest(tpl, [ignoreRequestError]);

Arguments - tpl string - The HTTP request template URL

  • ignoreRequestError (optional) boolean - Whether or not to ignore the exception when the request fails or the template is empty

And updated plunker

templateProvider: function(CONFIG, $templateRequest) {
    console.log('in templateUrl ' + CONFIG.codeCampType);

    var templateName = 'index5templateB.html';

    if (CONFIG.codeCampType === "svcc") {
         templateName = 'index5templateA.html';
    } 

    return $templateRequest(templateName);
},
like image 198
Radim Köhler Avatar answered Nov 09 '22 03:11

Radim Köhler


 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) {
                    }
                });
        }]);
like image 26
dhavalcengg Avatar answered Nov 09 '22 02:11

dhavalcengg