通过 $state.go 传递参数时出错

Question

我是 Angular 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);
    }



 }]);

Answer 1

问题已解决。 config.js、header 控制器和 search 控制器几乎没有变化。

在 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;