错误:无法解析api。movieDetails”状态“api”

时间:2021-07-26 19:41:08

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;