Question

I have an angular app with a few routes. on one of them there is a jquery plugin (bxslider) that I’m activating on viewContentLoaded.
If I go to a different route and then come back all the jQuery manipulation I did on the rout’s view is cleared and I need to do it over again?

Is there a way to come back to a previous route in its last state (with the query plugin already rendered?

angTestApp.controller('MyRouteCtrl', function($scope, $timeout) {
  $scope.readyFunction = function(e) {
    $timeout(function(){
      $('.slider').bxSlider();
    });
//

 }
$scope.$on('$viewContentLoaded', $scope.readyFunction);
});

Each time a call the route MyRoute the slider is re-rendered is there any way I can get the rendered version if I already been in that URL before and I’m still currently in the app (but in a different route)? (After all its a hash tag view and the browser shouldn’t refresh inside the app)

Answer 1

If I go to a different route and then come back all the jQuery manipulation I did on the route’s view is cleared and I need to do it over again?

Yes:

Every time the current route changes, the included view changes with it according to the configuration of the $route service. — ng-view docs

.

Is there a way to come back to a previous route in its last state (with the query plugin already rendered?

Not with normal ng-view and routing. When you first leave the route with the bxSlider, the DOM elements inside the ng-view are replaced with the DOM elements associated with the new view.

Maybe when you leave the view with the bxSlider you could “jQuery move” it to some hidden DOM element somewhere on the page (e.g., in some footer area), then move it back when you go back to the route. I think the bottom line is that you’ll have to “cache” it yourself somewhere, and restore it yourself. Wrapping the code and data in an Angular service would probably be best.