Question

我构建了一个网页，其中我有几个视图，但只有一个控制器。由于控制器不应在页面切换时重新加载，我将所有路由更改为“/ main / {{itemNo}} /？routname”。但是，当切换页面时，控制器仍然被重新加载（因此即使选择了英语，语言也总是切换回德语）。谁能告诉我我做错了什么？

以下是我的一些代码：

这是具有新路线的app.js的一部分：

.config(function ($routeProvider) {
    $routeProvider
      .when('/main', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/main/1/cart', {
        templateUrl: 'views/cart.html',
        controller: 'MainCtrl',
        controllerAs: 'main',
        reloadOnSearch: false
      })
      .when('/main/2/personaldata', {
        templateUrl: 'views/personalData.html',
        controller: 'MainCtrl',
        controllerAs: 'main',
        reloadOnSearch: false
      })

这是我的控制者：

.controller('MainCtrl', function ($scope) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    // console.log('init');




    $('#german').click(function () {
      changeValue('german');
    });

    $('#english').click(function () {
      changeValue('english');
    });

    $('#toshoppingcart').click(function () {
      setTimeout(function() {
        changeValue(selectedLang);
      }, 10);
    });

    $('#tocheckout').click(function () {
      setTimeout(function() {
        changeValue(selectedLang);
      }, 10);
    });



    var loadScript = function (src, callbackfn) {
      var newScript = document.createElement("script");
      newScript.type = "text/javascript";
      newScript.setAttribute("async", "true");
      newScript.setAttribute("src", src);

      if (newScript.readyState) {
        newScript.onreadystatechange = function () {
          if (/loaded|complete/.test(newScript.readyState)) callbackfn();
        }
      } else {
        newScript.addEventListener("load", callbackfn, false);
      }

      document.documentElement.firstChild.appendChild(newScript);
    };


    function changeValue(language) {
      console.log('change', language)
      selectedLang = language;
      if (language == 'english') {
        loadScript("scripts/languages/english.js", function () {
          updateValues()
        });
      } else {
        loadScript("scripts/languages/german.js", function () {
          updateValues()
        });
      }
    }

    var selectedLang = 'german';
    changeValue(selectedLang);

Answer 1

问题是reloadOnSearch = false会阻止您在更改参数（即搜索）或哈希（例如?q=blablabal和#/my-route#myHash时重新加载路由。而不是实际编码，它将在$routeUpdate上触发$rootScope。在您的情况下，您没有使用其中任何一个，您正在更改整个路线，因此它将重新加载路线。

根据$routeProvider的文档：

[reloadOnSearch=true] - {boolean=} - 仅在$location.search()或$location.hash()更改时重新加载路线。

如果该选项设置为false且浏览器中的网址发生更改，则会在根范围内广播$routeUpdate个事件。

此外，您必须将selectedLang存储在不同的位置而不是控制器构造函数范围，可能在$rootScope或localstorage，因为每次调用控制器时（每个路径都是您使用它）您的selectedLang变量定义为'german'，而不是之前定义的值。

尝试这样的事情（当然，考虑使用角度方式这样做，这只是一个例子）：

function changeValue(language) {
  console.log('change', language)
  selectedLang = window.localStorage['language'] = language;
  if (language == 'english') {
    loadScript("scripts/languages/english.js", function () {
      updateValues()
    });
  } else {
    loadScript("scripts/languages/german.js", function () {
      updateValues()
    });
  }
}

var selectedLang = window.localStorage['language'] || 'german';
changeValue(selectedLang);

即使reloadOnSearch设置为false，控制器也会重新加载

1 个答案: