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

Question

我正在使用 ui-router 并使用 Angular-translate 开发了一个多语言网站 但目前我陷入了我想要的场景:

1. 单个页面将有 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 翻译文本似乎是空的，并且标 checkout 现空标签，这会导致糟糕的用户体验。 任何帮助，将不胜感激。 谢谢!

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";
               }