$ stateParams пустого объект

Question

я видел много подобных вопросы на SO, но эти решения не работают для меня :(

О моем сайте и приложении: Бэкэнда WordPress с JSon апи, угловатое приложение на . mysite.lc/catalog/ страница

мой контроллер:

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

    catalogControllers.controller('catalogCtrl', ['$scope', '$state', '$stateParams', 
    function ($scope, $state, $stateParams) { 
     $log.debug(angular.toJson($stateParams, true)); 

     $http.get(url).success(function(data) { 
      console.log('data is loaded'); 
     });  
    } 
]); 

мои настройки маршрутизации:

var catalogApp = angular.module('catalogApp', ['ui.router', 'ngResource', 'ngSanitize', 'catalogControllers']); 

catalogApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('home', { 
      url: '?producttype&colors&models', 
      controller: 'catalogCtrl', 
      onEnter: function() { 
       console.log('route entered'); 
      } 
     }); 
    $urlRouterProvider.otherwise("/"); 
}]); 

Так что, когда я иду в URL-адрес, как http://mysite.lc/catalog/#/?producttype=4&colors=5,7,9&models=17 консоль показывает {} из catalogCtrl, затем data is loaded от catalogCtrl $ http.get, и только после этого route entered

Если я действительно войти его таким образом (в конфигурации маршрутизатора) controller: function($stateParams) { console.log($stateParams); } ничего не выводит.

Answer 1

Я нашел, в чем была проблема, и она маленькая и простая (как обычно :)).

На самом деле все сработало нормально, но у меня были некорректные вызовы $http.get выше, и мой журнал был до того, как были загружены какие-либо данные, поэтому сначала я зарегистрировал свои $ stateParams и только после этого (после того, как данные были загружены) мой "home" state был достигнут. Таким образом, решение заключается в том, чтобы положить работу с $ stateParams в функцию $http.get(..).success().

Так что теперь мой контроллер выглядит

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

catalogControllers.controller('catalogCtrl', ['$scope', '$state', '$stateParams', 
    function ($scope, $state, $stateParams) { 
     $http.get(url).success(function(data) { 
      console.log('data is loaded'); 
      $log.debug(angular.toJson($stateParams, true)); 
     });  
    } 
]); 

маршрутизатор:

var catalogApp = angular.module('catalogApp', ['ui.router', 'ngResource', 'ngSanitize', 'catalogControllers']); 

catalogApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('home', { 
      url: '?producttype&colors&models', 
      controller: 'catalogCtrl', 
      onEnter: function() { 
       console.log('route entered'); 
      } 
     }); 
    $urlRouterProvider.otherwise("/"); 
}]); 

URL как http://mysite.lc/catalog/#/?producttype=4&colors=5,7,9&models=17 Теперь выводит в консоли этого:

data is loaded от $ HTTP.получить контроллер

route entered от маршрутизатора

{ "producttype": "4", "colors": "5,7,9", "models": "17" } от $ stateParams контроллера

Пожалуйста, добавьте свой комментарий, потому что я действительно новичок в угловых и будет признателен за любые мнения на этот счет.

Answer 2

Я бы предложил разрешить $ stateParams в соответствующем состоянии в секции .config. Кроме того, если это ваше намерение, вам нужно сделать свой URL-адрес частью свойства url, а не только stateParameters, потому что ui-router автоматически не назначает «дом» только потому, что вы объявили его домашним. Вы также можете сделать параметры необязательными, объявив свойство «params» и установив все в null.

var catalogApp = angular.module('catalogApp', ['ui.router','ngResource', 'ngSanitize', 'catalogControllers']); 

catalogApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
$stateProvider 

    .state('home', { 
     params: { 
      productType: null, 
      colors: null, 
      models: null 
     } 
     url: '/home?productType&colors&models', 
     controller: 'catalogCtrl', 
     resolve: { 
      parameters: function($stateParams){ 
       return $stateParams; 
      } 
     } 
    }); 

    $urlRouterProvider.otherwise("/"); 
}]); 

и просмотреть его в консоли, я предложил бы использовать $ журнал, чтобы сохранить последовательность его (я имел эту проблему перед использованием console.log) и angular.toJson для отображения данных;

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

catalogControllers.controller('catalogCtrl', ['$scope', 'parameters', '$log' 
function ($scope, parameters, $log) { 
     $log.debug(angular.toJson(parameters, true)); 
     //the 'true' arguments makes the json 'prettyfied' 
    } 
]); 

дайте мне знать, как это происходит потому, что это немного неортодоксальные для меня, чтобы создать приложение, которое не начинается с корневой страницы.