路由时在配置中的 templateUrl 上应用条件

Question

我正在使用 ui-router 并使用 angular-translate 开发了一个多语言网站但目前我被困在我想要的地方：

单个页面将有 2 个模板，一个是普通版本，它是英文的，可以像普通站点一样工作，第二个模板将由 translate="" 属性组成，换句话说，是完全翻译的页面。但是我愿意，如果我在路由时可以有条件的话，这样就可以解决我的问题。查看代码可以使您更容易理解。

目前我的代码如下所示：

.state('whoweAre', {
            url: '/about-us',
            templateUrl: 'templates/whoweAre/whoweAre.html', 
            controller: 'whoweAreCtrl'
        }
    )

但现在我想要

    .state('whoweAre', {
            url: '/about-us',
            templateUrl: function(isTranslated){
             if(isTranslated){
              return "templates/translated/whoweAre/whoweAre.html";
             }
             else{
               return "templates/whoweAre/whoweAre.html";
             }
            }, 
            controller: 'whoweAreCtrl'
        }
    )

但这似乎不起作用，我在 app.js 中有这个 isTranslated 变量，但我无法在配置 (routes.js) 文件中访问它。任何与此相关的解决方法都会很棒。我使用它是因为当用户第一次到达时 angular 翻译文本似乎是空的并且标签出现时带有空标签，这会导致糟糕的用户体验。任何帮助，将不胜感激。谢谢！

Answer 1

您可以在app.js

中找到当前状态并动态设置模板

在你的app.js中检查状态

 $rootScope.$on('$stateChangeStart', function(event, next) {

                if(next.name=="whoweAre" && isTranslated)
                {
                  next.templateUrl="templates/translated/whoweAre/whoweAre.html";
                }
                else if(next.name=="whoweAre" && !isTranslated)
               {
                  next.templateUrl="templates/whoweAre/whoweAre.html";
               }

Answer 2

经过更多研究，我发现这种方式很有用。感谢大家的帮助。

templateProvider:
  function(AppService) {
    if(AppService.getLocal("language").locale != 'en' )
    return "translated template url";
    else
    return "normal page"
  }

路由时在配置中的 templateUrl 上应用条件

Apply condition on templateUrl in config while routing

javascript

user-experience

angularjs

angular-ui-router

angular-translate