控制器重新加载即使将ReloAdonSearch设置为false

Question

i构建一个网页，其中有几个视图，但只有一个控制器。由于控制器不应在页面开关上重新加载，因此我将所有路由更改为"/main/{{itemNo}}/？rutname"。但是，当切换页面时，控制器仍会重新加载（因此，即使选择了英语，该语言也总是切换回德语）。有人可以告诉我我做错了什么吗？

这是我的一些代码：

这是带有新路由的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

问题是，当您更改参数（aka，search）或像 ?q=blablabal和 #/my-route#myHash的哈希时，reloadOnSearch = false将阻止您的路由重新加载。而不是进行实时编码会触发$routeUpdate在$rootScope上。在您的情况下，您都不使用它们中的任何一个，而是在更改整个路线，因此它将重新加载路线。

根据$routeProvider的文档：

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

如果将选项设置为 false和浏览器中的URL，则在root范围上广播$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);