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

【问题标题】：Apply condition on templateUrl in config while routing路由时在配置中的 templateUrl 上应用条件
【发布时间】：2017-08-01 12:57:44
【问题描述】：

我正在使用 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 变量，我无法在 config (routes.js) 文件中访问它。任何与此相关的工作都会很棒。我使用它是因为当用户第一次到达时，角度翻译文本似乎是空的，并且标签出现时带有空标签，这会导致糟糕的用户体验。任何帮助，将不胜感激。谢谢！

【问题讨论】：

你应该在这里得到答案stackoverflow.com/q/33838313

标签： javascript angularjs angular-ui-router user-experience angular-translate

【解决方案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";
               }

【讨论】：

【解决方案2】：

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

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

【讨论】：