AngularJS $ routeParams: установить переменные $ scope

Question

Используя AngularJS 1.6.1, у меня есть страница с одним контроллером. Я хотел бы установить переменные $ scope в значения (необязательно) параметров маршрута, используя $ routeParams. Но, к сожалению, это не работает вообще:

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
   $routeProvider
      .when('/', {
         templateUrl: '/partials/partial1.htm'
      })
      .when('/:artist/:album', {
         templateUrl: '/partials/partial1.htm'
      })
      .otherwise({
         redirectTo: '/'
      });
});

myApp.controller('myController', function($scope, $routeParams) {
   $scope.artist = $routeParams.artist;
   $scope.album = $routeParams.album;
});

При использовании console.log я вижу, что значения устанавливаются ... но кажется, что маршрутизатор инициирует отдельный контроллер для параметризованного маршрута. Поэтому я попробовал это с дополнительным контроллером, а затем с помощью $ emit и $ on для передачи сообщения от второго к первому контроллеру.

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {
   $routeProvider
      .when('/', {
         templateUrl: '/partials/partial1.htm'
      })
      .when('/:artist/:album', {
         templateUrl: '/partials/partial1.htm',
         controller: 'URLController'
      })
      .otherwise({
         redirectTo: '/'
      });
});

myApp.controller('URLController', function($scope, $routeParams) {
   $scope.$emit('UrlChanged', $routeParams.artist, $routeParams.album);
});

myApp.controller('myController', function($scope, $routeParams, $http) {
   $scope.$on('UrlChanged', function(event, artist, album) {
      $scope.artist = $routeParams.artist;
      $scope.album = $routeParams.album;
      // CORRECTION: It keeps firing events if I add this
      $scope.loadAlbum();
      // loadAlbum() contains a call to a Rest API on the same server via $http.get.
      // Obviously this triggers the creation of a new URLController????
   });
});

, но это просто продолжает UrlChanged событий бесконечно.

ИСПРАВЛЕНИЕ: Это только продолжает срабатывать, если я добавлю $http.get вызов

Что мне нужно сделать, чтобы достичь своей цели?

Answer 1

Попробуйте прослушать $routeChangeSuccess событие службы $route (поскольку MainController, кажется, инициализируется до того, как происходит фактическое событие / навигация):

myApp.controller('MainController', ['$scope', function ($scope) {
    $scope.$on('$routeChangeStart', function ($event, next, current) {
        var params = next.params;
        if (params) {
            $scope.artist = params.artist;
            $scope.album = params.album;
        }
    });
}])