CODEWITHSUNDEEP
angularjsangular-routing
stars
stars

Reputation: 43

Unable to bind $scope value to view on Url change

I trying to create a search application using angularJS.I am facing the issue in binding $scope values to view when router Url changes.

I have a search field in /main.When I write the query and click on search button, the function does the data fetch and assign to a scope variable.The router URL will change to '/Result' and the respective view is displayed.But the view doesn't have the scope values bound. /main and /Result uses the same controller.

router code in main module :

 $routeProvider.
                      when('/main', {
                          templateUrl: '/views/search.html',
                          controller: 'searchCtrl'


                            }).when('/Result',{                                 
                                templateUrl:'/views/Result.html',
                                  controller: 'searchCtrl' ,
                                  reloadOnSearch: false


                                }).otherwise({      

                          redirectTo: '/main'
                      });

Controller : On button click from /main 

$scope.fetchResult=function(searchWord){

 shService.fetchResultDocumentsList(searchWord).data.then(function(response){
//service call here-data fetch is successfull.
 $scope.docResultList=response[0];
                 $scope.docResultList=response[0];
                 $scope.documents =  $scope.docResultList.data.documentEntities;
$location.path('/Result');
}

When the respective view is changing, the binding is not done.But when i replace the $scope.documents with $rootScope.documents binding is successful. I have read the use of $scope is encouraged over $rootScope.

Upvotes: 0

Views: 285

Answers (2)

gabriel
gabriel

Reputation: 118

As Sajeetharan said, $scope get reinitialized when you update location.

Using angularJs, you don't need to change location. You simply update $scope in the same view you used for searching. But if you really need to use another view, and assuming your search returns only strings, you could try to pass data through url, and grab it from your controller.

Something like this (not tested):

Solution 1 (Angular way)

Controller

$scope.documents = ""; // init your results to empty/null, as you need

$scope.fetchResult=function(searchWord){

 shService.fetchResultDocumentsList(searchWord).data.then(function(response){
//service call here-data fetch is successfull.
 $scope.docResultList=response[0];
                 $scope.docResultList=response[0];
                 $scope.documents =  $scope.docResultList.data.documentEntities;
$location.path('/Result');
}

View

<!-- search div is over here -->

<!-- results goes here -->
<div ng-if="$scope.documents">
 {{$scope.documents}}
</div>

Solution 2 (your way)

Router

$routeProvider.

when('/main', {
templateUrl: '/views/search.html',
controller: 'searchCtrl'})

.when('/Result/{data:[a-z]{1,}}',{ //here we specify that data expected format is only lowercase letters
 templateUrl:'/views/Result.html',
 controller: 'searchCtrl' ,
 reloadOnSearch: false
})
.otherwise({      
 redirectTo: '/main'
});

Controller

//  dont forget to inject $stateParams service in your controller
if( !$stateParams.data){
 $scope.data = $stateParams.data;
}

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222552

The controller and $scope gets re initialized when you move from one page to another page. if you want to use $scope , you should consider using service to share the data across controllers.

Create a service, that will hold your variable.

angular.service("dataService", function() {
    this.value1 = ""   
});

reference that service in your controllers,

angular.controller("myCntrl1", function($scope, dataService) {
    $scope.val= dataService.value1 ;
});


angular.controller("myCntrl2", function($scope, dataService) {
    $scope.val= dataService.value1 ;
});

Upvotes: 2

Related Questions