2017-08-09 20 views
0

私は角度jで新しいです。私は$state.goと仕事をするいくつかの問題があります。私はHeaderControllerにテキストフィールドとボタンを持っています。このボタンで私はng-clickの機能を呼び出しました。このボタンをクリックしてアレイを消去したいのですが、パラメータを使用してSearchControllerに行きたいと思っています。ここで私はパラメータとしてテキストフィールド値を取る。私の配列は、関数を使用してクリアされるが、状態変化のために、私はエラー

angular.js:9419 Error: Could not resolve 'search' from state 'home' 
    at Object.y.transitionTo (angular-ui-router.min.js:7) 
    at Object.y.go (angular-ui-router.min.js:7) 
    at Scope.$scope.searchFn (headerControllers.js:75) 
    at angular.js:10204 
    at angular.js:17971 
    at Scope.$eval (angular.js:11961) 
    at Scope.$apply (angular.js:12061) 
    at HTMLButtonElement.<anonymous> (angular.js:17970) 
    at angular.js:2613 
    at forEach (angular.js:310) 

を得た私は設定コード

angular.module('movieApp').config(['$urlRouterProvider','$stateProvider', '$locationProvider', function($urlRouterProvider,$stateProvider,$locationProvider){ 
     $stateProvider.state('home',{ 
      url : '/home', 
      templateUrl : 'app/components/home/home.html', 
      controller : 'HomeController', 
     }).state('search.id',{ 
      url : '/search', 
      params: { 
       param1: null 
      }, 
      templateUrl : 'app/components/search/search.html', 
      controller : 'SearchController',  
     }).state('header',{ 
      template : '<main-header></main-header>',   
     }).state('category',{ 
      url : '/category/:id', 
      templateUrl : 'app/components/category/category.html', 
      controller : 'CategoryController', 
     }).state('yearsort',{ 
      url : '/yearsort/:time_id/:page_id', 
      template : '<year-sort></year-sort>', 
     }).state('budgetsort',{ 
      url : '/budgetsort/:price_id/:page_id', 
      template : '<budget-sort></budget-sort>', 
     }); 
     $urlRouterProvider.otherwise('home'); 
}]); 

を有する私のヘッダコントローラは

angular.module('movieApp.header.controller', []).controller('HeaderController', ['$scope','HomeFactory','$timeout','$state',function($scope,HomeFactory,$timeout,$state){ 

    $scope.header = "home page"; 
    $scope.categoryList = []; 

    var callApi = function(){ 
       var apidata = localStorage.getItem('apiData'); 
       apidata = JSON.parse(apidata); 
       $scope.allMovieList = apidata; 
       movieCatgFn(apidata); 
       searchList(apidata); 
    } 
    var allMovieList = callApi(); 
    function movieCatgFn(data){ 
     var splitToAry = []; 
     for(var i=0; i<data.length; i++){ 
      splitToAry.push(data[i].genres.split("|")); 
     } 
     var fullArray = []; 
     $scope.genersAry = []; 
     fullArray=splitToAry.join().split(','); 
     for(var j=0; j<fullArray.length; j++){ 
      var count = 0; 
      $scope.genersAry.push(fullArray[j]); 
      for(var k=0; k<$scope.genersAry.length; k++){ 
       if(fullArray[j]==$scope.genersAry[k]){ 
        count+=1; 
       } 
       if(count>1){ 
        $scope.genersAry.pop(); 
       } 
      } 
     } 
    } 

    function searchList(data){ 
     $scope.changeFn = function(userData){ 
      if(userData!=null || userData!= ""){ 
       $scope.searchCatgAry = []; 
       for(var i=0; i<data.length; i++){ 
        var str = data[i].movie_title.toLowerCase().trim(); 
        var search = userData.toLowerCase().trim(); 
        if(str.search(search) != -1){ 
         $scope.searchCatgAry.push(data[i].movie_title); 
        } 
       } 
       if(userData==null || userData== ""){ 
        $scope.searchCatgAry = []; 
       } 
      } 
     } 
    } 

    $scope.serchAutocatg = function(data){ 
     console.log(data); 
     $scope.searchName = data; 
     $scope.searchCatgAry = []; 
    } 

    $scope.searchFn = function(searchName){ 
     console.log('hello: '+searchName); 
     $scope.searchCatgAry = []; 
     $state.go('search',{param1: searchName}); 
    }  

}]); 

ヘッダHTMLは

あります
<header ng-controller="HeaderController"> 
<form class="navbar-form navbar-right"> 
    <div class="form-group"> 
    <input type="text" class="form-control" placeholder="Search" ng-model="searchName" ng-change="changeFn(searchName)"> 
    </div> 
<button type="button" class="btn btn-default" ng-click="searchFn(searchName)">Submit</button> 
</form> 

マイサーチコントローラは、問題が解決されている

angular.module('movieApp.search.controller', []).controller('SearchController', ['$scope','movieAPI','HomeFactory','$timeout','$state',function($scope,movieAPI,HomeFactory,$timeout,$state) { 

    $scope.searchName = $state.params.searchId; 
    $scope.searchCatgAry = []; 

    var callApi = function(){ 
       var apidata = localStorage.getItem('apiData'); 
       apidata = JSON.parse(apidata); 
       $scope.allMovieList = apidata; 
       searchFieldFn(apidata); 
    } 
    var allMovieList = callApi(); 

    function searchFieldFn(data){ 
     for(var i=0; i<data.length; i++){ 
      var str = data[i].movie_title.toLowerCase().trim(); 
      var search = $scope.searchName.toLowerCase().trim(); 
      console.log(search); 
      if(str.search(search) != -1){ 
       $scope.searchCatgAry.push(data[i]); 
      } 
     } 
     console.log($scope.searchCatgAry); 
     $scope.searchName = ""; 
     console.log('$scope.searchName: '+$scope.searchName); 
    } 



}]); 
+0

もう一方のモジュールに注入する必要があります。 – Vivz

+1

あなたは州( 'search.id')を宣言します。しかし、$ state.go( 'search')whitouth.idを呼び出そうとすると、あなたの州ではdoesntが宣言されているので、コンソールの検索はできません。 –

+0

こんにちは、Carrasco、 私は変更しました $ state.go( 'search'、{param1:searchName}); 〜 $ state.go( 'search.id'、{param1:searchName}); が、エラーは angular.js同じままである:9419エラー:私は、私は非常に新しいですと、私は別のものに注入すべきモジュールを理解していなかった状態「ホーム」 – user1490238

答えて

0

です。 config.js、ヘッダコントローラ、および検索コントローラにはほとんど変更がありません。私は

$scope.searchFn = function(searchName){ 
    $state.go('search',{id: searchName},{reload:true}); 
} 

を記述する必要がありますし、検索コントローラに私が書く必要が$ state.goのヘッダコントローラで

.state('search',{ 
     url : '/search/:id', 
     templateUrl : 'app/components/search/search.html', 
     controller : 'SearchController',  
    }) 

:私のように状態を記述する必要があるconfig.jsで

パラメータにアクセスするコード

$scope.searchName = $state.params.id; 
関連する問題