错误:无法解析'api.movieDetails'从状态'api'

Error: Could not resolve 'api.movieDetails' from state 'api'

本文关键字：api movieDetails 状态 错误      更新时间：2024-04-02

我一直在学习AngularJS:UI路由器中的UI路由器教程。我已经研究了这些问题，但我找不到我的问题的答案。这是我正在做的一件非常简单的事情，所以这里没有先进的技术

因此，用户应该通过单击列表中的电影来进入电影详细信息状态。但每当我点击它，控制台就会显示：

错误：无法从状态"api"解析"api.moveDetails"

我该怎么解决这个问题？

.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");
});

我的html片段：

<div>
    <img src="{{movie.posters.thumbnail}}" />
    <a ui-sref="api.details({id: movie.id})"><h2>{{movie.title}}</h2></a>
</div>

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

首先，状态api.details缺少"id"参数，因此需要添加状态定义：

.state('details', {
    url: "/movieDetails/:id",
    templateUrl: "/movieDetails.html"
});

然后你需要重定向到状态并传递电影的参数：

<a ui-sref="api.details({id: movie.id})"><h2>{{movie.title}}</h2></a>

现在，将$stateParams注入到apiController中，并查看使用console.log($stateParams.id); 传递到状态的ID

相关文章：