I have been following this tutorial for UI-router in AngularJS: UI-router. I have researched the questions and I couldn't find an answer to my problem that I am having. Its a very simple thing that I am doing, so no advanced techniques here. :)
我一直在使用AngularJS: UI-router的UI-router教程。我研究了这些问题,却找不到我的问题的答案。这是我正在做的一件非常简单的事情,所以这里没有先进的技术。:)
So, the user should get to the movie details state by clicking on a movie in a list. But whenever I click on it, the console says:
因此,用户应该通过单击列表中的一个影片来获得电影细节状态。但每当我点击它,控制台就会显示:
Error: Could not resolve 'api.movieDetails' from state 'api'
错误:无法解析api。movieDetails”状态“api”
How can I fix this?
我该怎么解决这个问题呢?
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('api', {
url: '/api',
controller: 'apiController',
templateUrl: '/movieSearch.html'
})
.state('details', {
url: "/movieDetails/:id",
templateUrl: "/movieDetails.html"
});
//Catch all
$urlRouterProvider.otherwise("/movie");
});
my html snippet:
我的html片段:
<div>
<img src="{{movie.posters.thumbnail}}" />
<a ui-sref="api.details({id: movie.id})"><h2>{{movie.title}}</h2></a>
</div>
apiController.js
apiController.js
module.exports = function apiController($scope, apiFactory, $stateParams) {
$scope.data = {}
$scope.$watchGroup(['data.q', 'data.page_limit', 'data.page'], function() {
//Use movie loader
apiFactory.getMovies($scope.data.q, $scope.data.page_limit, $scope.data.page)
.then(function(response) {
$scope.movies = response.data.movies
});
})
}
1 个解决方案
#1
2
First of all, the state api.details
is missing the "id" parameter, so you need to add it the the state definition:
首先,状态pi.details缺少“id”参数,需要添加状态定义:
.state('details', {
url: "/movieDetails/:id",
templateUrl: "/movieDetails.html"
});
And then you need to redirect to the state and pass the parameter of the movie:
然后需要重定向到状态并传递影片的参数:
<a ui-sref="api.details({id: movie.id})"><h2>{{movie.title}}</h2></a>
Now, inject $stateParams
into apiController
and see the ID that was passed to the state using console.log($stateParams.id);
现在,将$stateParams注入apiController并查看通过console.log($stateParams.id)传递给州的ID;
#1
2
First of all, the state api.details
is missing the "id" parameter, so you need to add it the the state definition:
首先,状态pi.details缺少“id”参数,需要添加状态定义:
.state('details', {
url: "/movieDetails/:id",
templateUrl: "/movieDetails.html"
});
And then you need to redirect to the state and pass the parameter of the movie:
然后需要重定向到状态并传递影片的参数:
<a ui-sref="api.details({id: movie.id})"><h2>{{movie.title}}</h2></a>
Now, inject $stateParams
into apiController
and see the ID that was passed to the state using console.log($stateParams.id);
现在,将$stateParams注入apiController并查看通过console.log($stateParams.id)传递给州的ID;