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

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 这样的散列时阻止您的路由重新加载。它不会重新加载，而是会在 $rootScope 上触发 $routeUpdate。在你的情况下，你没有使用它们中的任何一个，你正在改变整个路线，因此它将重新加载路线。

根据 $routeProvider 的文档：

[reloadOnSearch=true] - {boolean=} - reload route when only $location.search() or $location.hash() changes.

If the option is set to false and url in the browser changes, then $routeUpdate event is broadcasted on the root scope.

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

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

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，控制器也会重新加载

controller reloads even though reloadOnSearch is set false

javascript

routes

url-routing

angularjs

angular-ui-router