AngularJS $routeParams: 设置 $scope 变量

Question

使用 AngularJS 1.6.1，我有一个只有一个控制器的页面。我想使用 $routeParams 将 $scope 变量设置为（可选）路由参数的值。但不幸的是，这根本不起作用：

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

尝试监听 $route 服务的 $routeChangeSuccess 事件（因为 MainController 似乎在实际 event/navigation 发生之前初始化）：

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;
        }
    });
}])

AngularJS $routeParams: 设置 $scope 变量

AngularJS $routeParams: Set $scope variables

angularjs

angular-router