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

Question

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

我想要实现的目标可能很简单，但我无法理解它，我将尝试使用从 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"
       });
     }
   });

我希望我的问题不会太令人困惑，我对 $resolve 和 $route 回调进行了研究，但我无法弄清楚它们，感谢任何帮助。

Answer 1

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

控制器：

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

查看：

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

这也可以通过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: "/",
        });
});