エラー：状態 'api'から 'api.movi​​eDetails'を解決できませんでした

Question

私はこのチュートリアルをAngularJSのUI-router： UI-routerに従っています。私は質問を研究し、私が持っている私の問題に対する答えを見つけることができませんでした。私がやっていることはとてもシンプルなので、ここでは高度なテクニックはありません。 :)

したがって、ユーザーはリスト内のムービーをクリックしてムービーの詳細状態にする必要があります。私はそれをクリックしたときにでも、コンソールは言う：

エラー：状態から「api.movi​​eDetails」を解決できませんでした「APIは、」

私はこれをどのように修正することができますか？

.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> 

、apiControllerに$stateParamsを注入し、console.log($stateParams.id);