I am new in angular js. I got some issue to work with $state.go
. I have a text field and a button in my HeaderController
. In this button I have called a function in ng-click
.I want to clear an array on this button click and want to go to SearchController
using the parameter. where I take the text field value as the parameter. My array is cleared using the function but for state change I got an error
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)
I have the config code
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');
}]);
My header controller is
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});
}
}]);
Header html is
<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>
My search controller is
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);
}
}]);
The issue has been solved. There are few changes in config.js, header controller and in search controller.
In config.js I have to write the state as:
.state('search',{
url : '/search/:id',
templateUrl : 'app/components/search/search.html',
controller : 'SearchController',
})
In header controller for $state.go I have to write
$scope.searchFn = function(searchName){
$state.go('search',{id: searchName},{reload:true});
}
And in search controller I have to write code to access the parameter as
$scope.searchName = $state.params.id;