angular js - ng-view - ng-route - 加载视图时的条件

I'm building a simple web application that involves 3 languages, I want to change the content from a block of text dynamically using partial html files with the language selected; Based of what i've researched, doesn't seem too difficult for me to set up the ng-view functionality, from w3schools: ng-routing - w3schools

我正在构建一个涉及3种语言的简单Web应用程序,我想使用选定语言的部分html文件动态更改文本块中的内容;根据我所研究的内容,从w3schools开始设置ng-view功能似乎并不太困难:ng-routing - w3schools

What I want to achieve is something that may be pretty simple but i can't get my head around it, I'll try to represent my idea using the same block of code that I took from w3schools ( the next code of course wouldn't work, but i hope it can explains my idea ) :

我想要达到的目标可能非常简单,但我无法理解它,我会尝试使用我从w3schools获取的相同代码块来代表我的想法(下一个代码当然不会'工作,但我希望它可以解释我的想法):

  var app = angular.module("myApp", ["ngRoute"]);
   app.config(function($routeProvider) {
       // declare variable to evaluate 
       var lang = "(dynamic value)"; // this value will be set dynamically.
       $routeProvider
       // condition if variable value is "es" 
       if (lang == "es") { 
       .when("/es", {
           templateUrl : "es.htm"
       })
      } 
      // else if , load the other language
      else if (lang == "ja") {
       .when("/ja", {
           templateUrl : "ja.htm"
       })
      }
      // if the value is none of above, then load the "default" one
      else { 
       .when("/en", {
           templateUrl : "en.htm"
       });
     }
   });

I hope my question isn't too confusing, I did research about $resolve and also $route callbacks but i just can't figure them out, I appreciate any help.

我希望我的问题不会太混乱,我做了关于$ resolve和$ route回调的研究,但我无法弄明白,我感谢任何帮助。

1 个解决方案

#1

This logic can be configured in a controller like so using the ngInclude directive:

可以使用ngInclude指令在控制器中配置此逻辑:

Controller:

app.module("myApp")
   .controller("myController", 
   function() {
       var self = this;
       self.lang = "(dynamic value)";
       self.templatePath = "";
       if (lang === "es") {
           self.templatePath = "(es path here)";
       } else if (lang === "ja") {
           self.templatePath = "(ja path here)";
       } else {
           self.templatePath = "(en path here)";
       }
   });

View:

<div ng-controller="myController as myCtrl">
    <div ng-include="myCtrl.templatePath"></div>
</div>

This can also be done with $routeProvider via templateUrl as a function, e.g.:

这也可以通过templateUrl作为函数使用$ routeProvider来完成,例如:

app.config(function($routeProvider) {
    $routeProvider.
        when('/:lang/somePage', {
            templateUrl: function(urlAttr) {
                if (urlAttr.lang === "es") {
                    return "/pathForEs";
                } else if (urlAttr.lang === "ja") {
                    return "/pathForJa";
                } else {
                    return "/pathForEn";
                }
            },
            controller: "somePageController"
        }).
        otherwise({
            routeTo: "/",
        });
});

#1