使用$ rootScope更改templateUrl AngularJS

我試圖將templateUrl更改爲指向不同的文件，當用戶使用AngularJS從下拉列表中選擇一個值時。

目前，我有一個SidebarController與用戶選擇的值設置$rootScope：

$scope.changeTemplate = function(templateModel){ 
     $rootScope.themeFolder = templateModel; 
    }

的HTML

<section id='templates'> 
     <span>Select your template</span> 
     <div class="btn-group"> 
      <label class="active btn btn-primary" ng-model="templateModel" ng-click='changeTemplate(templateModel)' uib-btn-radio="'t1'">template 1</label> 
      <label class="btn btn-primary" ng-model="templateModel" ng-click='changeTemplate(templateModel)' uib-btn-radio="'t2'">template 2</label> 
      <label class="btn btn-primary" ng-model="templateModel" ng-click='changeTemplate(templateModel)' uib-btn-radio="'t3'">Template 3</label> 
      <label class="btn btn-primary" ng-model="templateModel" ng-click='changeTemplate(templateModel)' uib-btn-radio="'t4'">Template 4</label> 
     </div> 
    </section>

然後，我有我的所有路由的一個單獨的文件module.js內

application.config(["$stateProvider", function ($stateProvider) { 

    var main = { 
     name: "MainPage", 
     url: "/", 
     title: 'My test Angular Site', 
     views: { 
      "mainContent": { 
       templateUrl: 'modules/main/template/t1/home.html', 
       controller: "MainPageController" 
      }, 
      "sidebar":{ 
       templateUrl: "modules/main/template/sidebar.html", 
       controller: "SidebarController" 
      } 
     } 
    }; 
    $stateProvider.state(main); 
}]);

通過defaul你會注意到它被設置爲從t1目錄加載home.html。我希望在用戶選擇不同的模板時動態地進行此更改。

有沒有人有任何想法我可能能夠實現這一目標？

謝謝，

來源

2016-03-07 Javacadabra

你應該使用動態ng-include像：'

' – Hitmands

你可以使用$ templateCache來實現這一點。只需對模板和$ templateCache.set（...）進行ajax調用即可。然而，這聽起來確實是一個糟糕的主意，我想知道爲什麼你想這麼做。我不認爲你應該嘗試改變這些網址。而是以編程方式解決問題。但不幸的是，我不知道你想要達到什麼目的，以便能夠給你任何進一步的建議。

來源

2016-03-07 12:20:02

使用$ rootScope更改templateUrl AngularJS

回答

相關問題