AngularJS routeProvider

Question

在以下代码段中：

var root = "default";

app.config(['$routeProvider', function ($routeProvider) {
   $routeProvider
    .when("/",          {templateUrl: "partials/prototypes.html", controller: "PageCtrl"})

    .when("/gmp-01",    {templateUrl: setroot("gmp-01/") , controller: "PageCtrl"} )
    .when("/gmp-02",    {templateUrl: setroot("gmp-02/") , controller: "PageCtrl"} )
    .when("/gmp-03",    {templateUrl: setroot("gmp-03/") , controller: "PageCtrl"} )
    .when("/gmp-04",    {templateUrl: setroot("gmp-04/") , controller: "PageCtrl"} )

    .when("/login",     {templateUrl: constructRoute("login.html") , controller: "PageCtrl"} );
}]);

function setroot(r) {
  root = r; 
  return "partials/" + root + "start-page.html";
}

当我运行应用程序并导航到“/”时，“setroot”被调用4次，而不管我还没有请求“gmp-0x”路由。这会导致root的值被设置为“setroot”传入的最后一个参数，在这种情况下是“gmp-04 /”。

如何确保仅在请求路线时才设置“root”的值？

Answer 1

它被执行了4次，因为你执行了4次。在覆盖之前，请尝试检查是否设置了root：

var root = null;

app.config(['$routeProvider', function ($routeProvider) {
   $routeProvider
    .when("/",          {templateUrl: "partials/prototypes.html", controller: "PageCtrl"})

    .when("/gmp-01",    {templateUrl: setroot("gmp-01/") , controller: "PageCtrl"} )
    .when("/gmp-02",    {templateUrl: setroot("gmp-02/") , controller: "PageCtrl"} )
    .when("/gmp-03",    {templateUrl: setroot("gmp-03/") , controller: "PageCtrl"} )
    .when("/gmp-04",    {templateUrl: setroot("gmp-04/") , controller: "PageCtrl"} )

    .when("/login",     {templateUrl: constructRoute("login.html") , controller: "PageCtrl"} );
}]);

function setroot(r) {
  if(root === null) {
      root = r; 
  }
  return "partials/" + root + "start-page.html";
}

然而

我认为这不会做你希望它会做的事情，因为这些方法是在设置路线时执行的，而不是在第一次调用路线时！

您最好将templateUrl设置为实际功能：

$routeProvider.when('/gmp/:number', {
   templateUrl: function(urlattr){
       if(root === null) {
           root = urlattr.number; 
       }           
       return '/partials/gmp-' + root + 'start-page.html';
   },
   controller: 'PageCtrl'
};

看到区别？这是未经测试的，但我认为你得到了要点。