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

【问题标题】：controller reloads even though reloadOnSearch is set false即使 reloadOnSearch 设置为 false，控制器也会重新加载
【发布时间】：2016-11-25 12:29:02
【问题描述】：

我构建了一个网页，其中有多个视图，但只有一个控制器。由于控制器不应在页面切换时重新加载，我将所有路由更改为“/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);

【问题讨论】：

旁注，您使用 jQuery ID 选择器而不是 ng-click 的任何原因？
之前是一个普通的js项目，没有任何fw，现在我把它改成了angular，因为我也有reload问题
您可能需要将selectedLang 存储在不同的位置而不是控制器构造函数范围内，可能在$rootScope 上，因为每次调用控制器（您使用它的每条路由）您的@ 987654326@ 变量被定义为german，而不是之前定义的值。我说的对吗？
@LenilsondeCastro 是的，这就是问题所在，但我想如果我添加 reloadOnSearch = false，控制器不会重新加载并且值不会设置回德语？或者这是错的？但你的意思是，如果我将它存储为 rootscope 变量，我将不会被覆盖？
reloadOnSearch = false 将阻止您在更改参数（也称为搜索）或像 ?q=blablabal 和 #/my-route#myHash 这样的哈希值时重新加载路由。它不会重新加载，而是在 $rootScope 上触发 $routeUpdate。

标签： javascript angularjs routes angular-ui-router url-routing

【解决方案1】：

问题是reloadOnSearch = false 会在您更改参数（也称为搜索）或像?q=blablabal 和#/my-route#myHash 这样的散列时阻止重新加载路由。它不会重新加载，而是在$rootScope 上触发$routeUpdate。在您的情况下，您没有使用它们中的任何一个，您正在更改整个路线，因此它将重新加载路线。

根据$routeProvider 的文档：

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

如果选项设置为false 并且浏览器中的url 发生变化，那么$routeUpdate 事件将在根范围内广播。

此外，您必须将selectedLang 存储在不同的位置而不是控制器构造函数范围内，可能在$rootScope 或localstorage，因为每次调用控制器（您使用它的每条路由）您的@ 987654337@ 变量被定义为'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);

【讨论】：