javascript - 错误 : Could not resolve 'api.movieDetails' from state 'api'

Question

我一直在关注 AngularJS 中的 UI 路由器教程: UI-router .我已经研究了这些问题，但找不到我遇到的问题的答案。这是我正在做的一件非常简单的事情，所以这里没有高级技术。 :)

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

错误:无法从状态“api”解析“api.movi​​eDetails”

我该如何解决这个问题？

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

Answer 1

首先，状态 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 注入(inject) apiController 并使用 console.log($stateParams.id); 查看传递给状态的 ID；