2017-08-09 67 views
0

传递参数我在角JS是新的。我遇到了一些与$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('搜索')whitouth .id多数民众赞成为什么说控制台搜索不能解决因为没有声明在你的状态。 –

+0

你好卡拉斯科, 我已经改变 $ state.go( '搜索',{参数1:searchName}); 至 $ state.go('search.id',{param1:searchName}); 但错误仍然相同 angular.js:9419错误:无法解析'搜索.id'状态'家' – user1490238

回答

0

这个问题已经解决了。 config.js,头控制器和搜索控制器中的变化很少。

在config.js我写的状态:

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

在头控制器$ state.go我必须写

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

而且在搜索控制器我必须写代码访问参数为

$scope.searchName = $state.params.id;