入力とアンカーリンクを備えた単純なテンプレートがあり、それを押すと別のテンプレートが読み込まれます。この 2 番目のテンプレートで、http 要求を介して情報を取得する必要があります。
私は ng-route を使用して、デフォルトで検索テンプレートにリダイレクトし、パス /search/:title から結果テンプレートにリダイレクトしています。結果テンプレートをロードする前に、解決を使用してリクエストを作成しようとしています ( plunker のコード)
私が直面している主な問題は、解決を追加すると、コントローラーの初期化が停止することです (約束が返された後にロードされると思います)。これは、検索 URL などの変数が初期化されておらず、コントローラーの検索関数で出力するときに $routeParams が空であることを意味します。
どうすればいいですか?
また、解決の正しい構文についてもわかりません。最初の検索はスコープ変数ですか?
resolve: {
search: searchController.search
}
Plunker を確認するのが面倒な人のために、ここに関連するコードを示します。
ルーティング
.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/search', {
templateUrl: 'templates/search.html'
}).
when('/search/:title', {
templateUrl: 'templates/result.html',
controller: 'searchController',
resolve: {
search: searchController.search
}
}).
otherwise({
redirectTo: '/search'
});
}]);
検索コントローラー
var searchController = search.controller('searchController', ["$http", "$scope", "$location", '$rootScope', '$routeParams', function($http, $scope, $location, $rootScope, $routeParams) {
console.log("Controller constructor");
this.searchURL = 'http://www.myapifilms.com/imdb?title=%thetitle%&format=JSON';
$scope.response = '<Response here>';
this.title = '';
this.defer = null;
console.log("PARAMS: " + JSON.stringify($routeParams));
}]);
searchController.search = function searchMovie($q, $routeParams) {
searchController.defer = $q.defer;
var searchString = $routeParams.title;
url = searchController.searchURL.replace('%thetitle%', searchString);
console.log("URL: " + url);
searchController.searchRequest(url);
};
searchController.searchRequest = function(url) {
$http.get(url).success(function(data) {
....
searchController.defer.resolve();
return searchController.defer.promise;
})
.error(function(data, status, headers, config) {
...
searchController.defer.resolve();
return searchController.defer.promise;
})
};