Я следил angular-phonecat
учебником по angular-phonecat
и пытаюсь что-то построить таким же образом.
В моем файле index.html
меня есть список места и их изображений, когда я выбираю конкретное место, мне нужно перейти на другое представление с подробностями о нем. Тем не менее, я получаю тот же результат, что и в своем html файле html (например, это подробный вид для {{meetingId}}, где eventID не разрешается и отображается только как eventid)
<ul>
<li ng-repeat="venue in venues | filter: venue | orderBy: predicate" class="thumbnail">
<div class="row">
<div class="col-md-6">
<a href="#/venue-details/{{venue.id}}"><img ng-src="{{venue.imageUrl}}"></a>
</div>
<div class="col-sm-3">
<a href="#/venue-details/{{venue.id}}" class="thumb"> {{ venue.name }}</a>
</div>
</li>
</div>
</ul>
app.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {}])
.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('search', {
url: '/search',
templateUrl: 'templates/search2.html'
})
.state('/venue-details/:venueId', {
url: '/venue-details',
templateUrl: 'templates/venue-details.html',
controller: 'venueDetailCtrl'
});
}
]);
app.controller('venueDetailCtrl', ['$scope', '$stateProvider',
function($scope, $stateProvider) {
$scope.venueId = $stateProvider.venueId;
}
]);
detail view for <span>{{venueId}}</span>
function($scope, $stateProvider) {
$scope.venueId = $stateProvider.venueId;
}]);
Не $ stateProvider: $ stateParams :)
это может быть проблематично
.state('/venue-details/:venueId', {
url: '/venue-details',
templateUrl: 'templates/venue-details.html',
controller: 'venueDetailCtrl'
})
это должно быть
.state('venuedetail', {
url: '/venue-details/:venueId',
templateUrl: 'templates/venue-details.html',
controller: 'venueDetailCtrl'
})
В названии состояния есть проблема.
Stackoverflow действительно помогает начинающим, как я. Спасибо, много парней за вашу помощь. Исправьте. Была ошибка с моими объявлениями id. Я где-то использовал id и Id, поэтому я думаю, что это создало проблему. На самом деле я попробовал его с другими привязками в таких местах, как event.details и т.д. Все работало, но не с Id, тогда я понял это. Спасибо за помощь ребятам за исправление моей ошибки объявления параметров состояния. здесь полный рабочий код
index.html
<div class="col-md-6">
<a href="#/search/{{venue.id}}"><img ng-src="{{venue.imageUrl}}"></a></div>
<div class="col-sm-3">
<a ui-sref="venuedetail({venueid:venue.id})" class="thumb"> {{ venue.name }}</a>
</div>
config.router.js
app.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {}])
.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('search', {
url: '/search',
templateUrl: 'templates/search2.html'
})
.state('/venue-details/:venueid', {
url: '/venue-details',
templateUrl: 'templates/venue-details.html',
controller: 'venueDetailCtrl'
});
}
]);
controller.js
app.controller('venueDetailCtrl', ['$scope', '$stateProvider',
function($scope, $stateProvider) {
$scope.venueid = $stateProvider.venueid;
}
]);
Место-details.html
detail view for <span>{{venueId}}</span>
{{ }}
печатаются в конечном выводе, это указывает на то, что у вас есть какая-то ошибка скрипта, из-за которой angular не обрабатывал страницу. Какие ошибки в журнале консоли браузера? Это будет то, что помогает решить эту проблему.