1

I have an app which I developing using Django and angular js . I am storing history with $location in angular js , when I click on back button in browser the url is getting changed in address bar but content is not getting changed in page .

My requirement is url may or may not be changed in address bar but content of page must be changed when I click on back button .

Any suggestion or function that angular js provide ?

Edited : my code

Angular js code :

var brainframeApp = angular.module('brainframeApp',['ngRoute']);


//configuring angularjs symbos to not to conflict with Django template symbols
brainframeApp.config(function($interpolateProvider, $locationProvider,$routeProvider) {
  $interpolateProvider.startSymbol('{$');
  $interpolateProvider.endSymbol('$}');
  $locationProvider.html5Mode(true).hashPrefix('!');

});



// Controller which contains Angularjs Functions for a/many templates or Scope.
brainframeApp.controller('brainframeController',function($scope,$http, $location, $route){
    $scope.getAllBrainframes=function(id){
        $scope.is_exist = 1
        if(id){
            $scope.url = '/get-brainframe/'+id+'/'; 
        }else{
           $scope.url = '/get-brainframe/';
        }

        $location.path($scope.url);
        aa = $route.reload();
        console.log(aa);

        $http.get($scope.url)
            .success(function(data,status){
                $scope.title = data[0].title
                var check_data = data[0].brainframes;
                if ( typeof check_data == 'undefined' || check_data.length < 1){
                    $scope.is_exist = 0;
                }
                $scope.brainframes = data;
            })
            .error(function(data,status){
            });
    }
});

HTML code : 

 <div class="content">
        <div ng-if = "is_exist == 1">
            <span ng-repeat="brainframe in brainframes">
                    <p>
                        <ul class="list-group col-md-4">
                            <span data-ng-repeat="brain in brainframe.brainframes">
                                <a ng-href="" ng-click="getAllBrainframes(brain.brainframe_child.pk)"><li class="list-group-item"><span class="badge">{$ brain.count_children $}</span>{$ brain.brainframe_child.title $}</li></a>
                            </span>
                        </ul>
                    </p>
            </span>
        </div>

        <div ng-if = "is_exist == 0">
            <p>No brainframes are available.</p>
        </div>

    </div>
n.imp
  • 787
  • 4
  • 11
  • 29
  • Are you sure that the **data** is not empty in result of below request? `$http.get($scope.url).success(function(data, status){...})` – okanozeren Mar 16 '15 at 09:46
  • @nerezo no its not empty , even in console i don't see any ajax request hit when I click on back button – n.imp Mar 16 '15 at 09:56
  • I do not understand why you wait it should be make an ajax call? You call the url within the **getAllBrainframes** method by clicking the anchor. – okanozeren Mar 16 '15 at 11:40

1 Answers1

0

try $route.reload(); after you set location

sample code : 

controller($scope,$location,$route)
{
 $location.path("/home");
 $route.reload();
}

or You should run the expression as function in the $apply() method like

$rootScope.$apply(function() {    
        $location.path("/home");
        console.log($location.path());
      });
Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234