$ rootScope. $ digest - это очистка параметров [duplicate]

В ответах выше, включая GitHub, были некоторые проблемы для моего сценария, а также кнопка «Назад» или «Прямое изменение URL» из браузера - это перезагрузка контроллера, что мне не понравилось. Наконец я пошел со следующим подходом:

1. Определите свойство в определениях маршрутов, называемое noReload, для тех маршрутов, где вы не хотите, чтобы контроллер перезагружался при изменении маршрута.

.when('/:param1/:param2?/:param3?', {
    templateUrl: 'home.html',
    controller: 'HomeController',
    controllerAs: 'vm',
    noReload: true
})

2. В функции запуска вашего модуля поместите логику, которая проверяет эти маршруты. Это предотвратит перезагрузку, только если noReload - true, а предыдущий маршрут - тот же.

fooRun.$inject = ['$rootScope', '$route', '$routeParams'];

function fooRun($rootScope, $route, $routeParams) {
    $rootScope.$on('$routeChangeStart', function (event, nextRoute, lastRoute) {
        if (lastRoute && nextRoute.noReload 
         && lastRoute.controller === nextRoute.controller) {
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                un();
                // Broadcast routeUpdate if params changed. Also update
                // $routeParams accordingly
                if (!angular.equals($route.current.params, lastRoute.params)) {
                    lastRoute.params = nextRoute.params;
                    angular.copy(lastRoute.params, $routeParams);
                    $rootScope.$broadcast('$routeUpdate', lastRoute);
                }
                // Prevent reload of controller by setting current
                // route to the previous one.
                $route.current = lastRoute;
            });
        }
    });
}

3. Наконец, в контроллере слушайте событие $ routeUpdate, чтобы вы могли делать все, что вам нужно, когда изменяются параметры маршрута.

HomeController.$inject = ['$scope', '$routeParams'];

function HomeController($scope, $routeParams) {
    //(...)

    $scope.$on("$routeUpdate", function handler(route) {
        // Do whatever you need to do with new $routeParams
        // You can also access the route from the parameter passed
        // to the event
    });

    //(...)
}

Имейте в виду, что при таком подходе вы не меняете вещи в контроллер, а затем обновить путь соответственно. Это наоборот. Сначала вы меняете путь, затем слушаете событие $ routeUpdate, чтобы изменить ситуацию в контроллере, когда изменяются параметры маршрута.

Это упрощает и согласовывает действия, поскольку вы можете использовать ту же логику, когда вы просто изменяете путь ( но без дорогостоящих $ http-запросов, если хотите) и когда вы полностью перезагрузите браузер.

Для тех, кому требуется изменение пути () без перезагрузки контроллеров. Вот плагин: https://github.com/anglibs/angular-location-update

Использование:

$location.update_path('/notes/1');

На основании https://stackoverflow.com/a/24102139/1751321

PS Это решение https://stackoverflow.com/a/24102139/1751321 содержит ошибку после вызова пути (, false) - это приведет к потере навигации браузера назад / вперед, пока путь (, true) не будет вызван

Существует простой способ изменения пути без перезагрузки

URL is - http://localhost:9000/#/edit_draft_inbox/1457

Используйте этот код для изменения URL-адреса, страница не будет перенаправлена ​​

. Второй параметр «false» очень важен.

$location.path('/edit_draft_inbox/'+id, false);

Хотя этот пост является старым и имеет принятый ответ, использование reloadOnSeach = false не решает проблему для тех из нас, кому нужно изменить фактический путь, а не только параметры. Вот простое решение:

Используйте ng-include вместо ng-view и назначьте свой контроллер в шаблоне.

<!-- In your index.html - instead of using ng-view -->
<div ng-include="templateUrl"></div>

<!-- In your template specified by app.config -->
<div ng-controller="MyController">{{variableInMyController}}</div>

//in config
$routeProvider
  .when('/my/page/route/:id', { 
    templateUrl: 'myPage.html', 
  })

//in top level controller with $route injected
$scope.templateUrl = ''

$scope.$on('$routeChangeSuccess',function(){
  $scope.templateUrl = $route.current.templateUrl;
})

//in controller that doesn't reload
$scope.$on('$routeChangeSuccess',function(){
  //update your scope based on new $routeParams
})

Только нижняя сторона - это то, что вы не можете использовать разрешить атрибут, но это довольно легко обойти. Также вам нужно управлять состоянием контроллера, например, логикой на основе $ routeParams, поскольку маршрут изменяется в контроллере по мере изменения соответствующего URL.

Вот пример: http: // plnkr. сотрудничество / редактировать / WtAOm59CFcjafMmxBVOP? р = предварительный просмотр

Вот мое более полное решение, которое решает несколько вещей: @ Vigrond и @rahilwazir пропущены:

• Когда параметры поиска были изменены, это предотвратило бы трансляцию $routeUpdate.
• Когда маршрут фактически оставлен без изменений, $locationChangeSuccess никогда не запускается, что приводит к предотвращению обновления маршрута next .
• Если в том же цикле дайджеста был еще один запрос на обновление , на этот раз, желая перезагрузить, обработчик события отменит эту перезагрузку.

  app.run(['$rootScope', '$route', '$location', '$timeout', function ($rootScope, $route, $location, $timeout) {
      ['url', 'path'].forEach(function (method) {
          var original = $location[method];
          var requestId = 0;
          $location[method] = function (param, reload) {
              // getter
              if (!param) return original.call($location);
  
              # only last call allowed to do things in one digest cycle
              var currentRequestId = ++requestId;
              if (reload === false) {
                  var lastRoute = $route.current;
                  // intercept ONLY the next $locateChangeSuccess
                  var un = $rootScope.$on('$locationChangeSuccess', function () {
                      un();
                      if (requestId !== currentRequestId) return;
  
                      if (!angular.equals($route.current.params, lastRoute.params)) {
                          // this should always be broadcast when params change
                          $rootScope.$broadcast('$routeUpdate');
                      }
                      var current = $route.current;
                      $route.current = lastRoute;
                      // make a route change to the previous route work
                      $timeout(function() {
                          if (requestId !== currentRequestId) return;
                          $route.current = current;
                      });
                  });
                  // if it didn't fire for some reason, don't intercept the next one
                  $timeout(un);
              }
              return original.call($location, param);
          };
      });
  }]);
  

Я использую это решение

angular.module('reload-service.module', [])
.factory('reloadService', function($route,$timeout, $location) {
  return {
     preventReload: function($scope, navigateCallback) {
        var lastRoute = $route.current;

        $scope.$on('$locationChangeSuccess', function() {
           if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
              var routeParams = angular.copy($route.current.params);
              $route.current = lastRoute;
              navigateCallback(routeParams);
           }
        });
     }
  };
})

//usage
.controller('noReloadController', function($scope, $routeParams, reloadService) {
     $scope.routeParams = $routeParams;

     reloadService.preventReload($scope, function(newParams) {
        $scope.routeParams = newParams;
     });
});

. Этот подход сохраняет функциональность кнопки «Назад», и вы всегда используете текущие параметры маршрута в шаблоне, в отличие от некоторых других подходов, которые я видел.

Если вам нужно изменить путь, добавьте это после вашего .config в файл приложения. Затем вы можете сделать $location.path('/sampleurl', false);, чтобы предотвратить перезагрузку

app.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
}])

. Кредит переходит на https://www.consolelog.io/angularjs-change-path-without-reloading для самое элегантное решение, которое я нашел.

Добавить следующий внутренний тег заголовка

  <script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>

Это предотвратит перезагрузку.

почему бы просто не поставить ng-контроллер на один уровень выше,

<body ng-controller="ProjectController">
    <div ng-view><div>

И не устанавливать контроллер на маршруте,

.when('/', { templateUrl: "abc.html" })

он работает для меня.