Question

我正在尝试在我的templateUrl中使用$scope，如下所示：

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

选项一

您可以在网址中设置一个变量（在您的情况下是主题名称），然后在您的路线中访问它：

.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;
    };
});

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

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/

Answer 2

在配置阶段，你只能要求提供商（$ routeProvider，$ locationProvider等），这意味着你不能注入$ scope实例。你总是可以在运行阶段注入任何实例。

示例：

// configuration app.config(function($routeProvider) { }); //inject any instance app.run(function($rootScope) { //your logic here });

请查看以下stackoverflow answer。

Answer 3

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

然后在控制器中，您可以注入themeState并更新currentTheme属性。这应该工作。 currentTheme应该是提供者和服务之间共享的同一对象的属性。

angularjs使用templateUrl中的变量

3 个答案: