1

入力とアンカーリンクを備えた単純なテンプレートがあり、それを押すと別のテンプレートが読み込まれます。この 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;
        })
    };
4

1 に答える 1