Помещение "разрешения" на угловом-ui-маршрутизаторе не работает - страница просто не отображает

$stateProvider

.state('root', {
 url: '',
 views: {
 'root.base': { templateUrl: '/templates/root/root.html' },
 'root.sidebar': {
 templateUrl: '/templates/root/root-sidebar.html',
 controller: 'SomeDataController',
 resolve: {
 someData: function(DataService) { // DataService is an angular service for data retrieval
 return DataService.getDataList(); // returns an array
 }
 },
 }
 }
});

Если я попытаюсь запустить решение на подпункте с angular-ui-router, страница просто будет пустым. Если я опускаю решение, он загружается нормально - но мне нужно разрешить некоторые данные до того, как будет создан экземпляр моего контроллера. У меня правильный синтаксис? Я искал примеры высокого и низкого уровня, но, похоже, не нашел подходящих для моей ситуации.

Учитывая мой вышеприведенный пример, не следует ли "root-sidebar.html" использовать область "SomeDataController" и не должен ли SomeDataController разрешать данные в определении маршрута, объявленном выше?

1 ответ

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

Вот контроллер, потребляющий некоторые данные

.controller('SomeDataController', function($scope, someData) {
 $scope.data = someData
 })

И вот наша служба загружает некоторые JSON и возвращает это как async:

.factory('DataService', ['$http',
 function($http) {
 return {
 getDataList: function() {
 return $http
 .get("data.json")
 .then(function(response) {
 return response.data;
 });
 },
 };
 }
 ]);

Неисправность state не изменяется (только для отображения данных):

$stateProvider
 .state('root', {
 url: '',
 views: {
 'root.base': {
 template: '<div>root base view</div>',
 },
 'root.sidebar': {
 template: '<div>root sidebar view' +
 '<h5>the resolve data</h5>' +
 '<pre class="prettyprint linenums">{{data | json}}
' + '
', controller: 'SomeDataController', resolve: { someData: function(DataService) { // DataService is an angular service for data retrieval return DataService.getDataList(); // returns an array } }, } } });

Вы можете проверить, что все здесь

licensed under cc by-sa 3.0 with attribution.