javascript - angularjs 在 templateUrl 中使用变量

Question

我正在尝试使用 $scope在我的 templateUrl 中是这样的:

app.config(['$routeProvider',
function ($routeProvider) {
    $routeProvider.
        when('/blog', {
                templateUrl: 'themes/{{ mainCtrl.site_theme }}/view/home.html',
                controller: 'BlogMain',
        }).
        otherwise({
            redirectTo: '/blog'
        })
}]);

尝试使用时:

root/themes/<theme_name>/view/home.html作为模板文件。它目前给我错误 GET http://www.url.com/themes/%7B%7B%20mainCtrl.site_theme%20%7D%7D/view/home.html 404 (Not Found)

注意:如果我正常输入主题名称，它可以正常工作

任何帮助将不胜感激 :D 提前致谢

Answer 1

选项一

你可以在 url 中设置一个变量(在你的例子中是主题名称)，然后在你的路由中访问它:

.when('/blog/:themeName', {
     templateUrl: function(params) {
         return 'themes/'+ params.themeName +'/view/home.html',
     }

这可能不太适合您的情况，因为通过 URL 传递您的主题名称并不理想。我推荐选项二...

选项二

您可以使用提供程序来允许设置主题名称:

app.provider('themeConfig', function() {
    this.name = 'Default';
    this.$get = function() {
        var name = this.name;
        return name;
    };
    this.setName = function(name) {
        this.name = name;
    };
});

您现在可以将提供程序注入(inject)到您的应用程序配置中，设置主题，然后在您的路由中使用它。

app.config(['$routeProvider', 'themeConfigProvider', 
   function ($routeProvider, themeConfigProvider) {

      themeConfigProvider.setName('mytheme');

      $routeProvider
          .when( '/this', { templateUrl: themeConfigProvider.name + '-this.html' })
          .when( '/that', { templateUrl: themeConfigProvider.name +'-that.html' })
          .when( '/other', { templateUrl: themeConfigProvider.name +'-other.html' })
          .otherwise( { redirectTo: '/this' });
}]);

在这里工作 jsfiddle:http://jsfiddle.net/3B5Sk/