Question

当用户使用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);
}]);

默认情况下，您会注意到它已设置为从t1目录加载home.html。我希望在用户选择其他模板时动态进行此更改。

有没有人知道我怎么能够实现这个目标？

谢谢，

Answer 1

您可以使用$ templateCache来实现此目的。只需对模板进行ajax调用，并将$ templateCache.set（...）调用到给定路径。然而，这听起来确实是一个坏主意，我想知道你为什么要首先这样做。我认为你根本不应该尝试改变这些网址。而是以编程方式解决问题。但不幸的是，我不知道你最终想要达到什么目的，能够给你任何进一步的建议。

使用$ rootScope AngularJS更改templateUrl

1 个答案: