Get AngularJs $scope in History popstate event?

Question

I am newbie angularjs developer. I have,

var app = angular.module('myapp', []);
app.controller('ProductCtrl', ['$scope', '$sce', function ($scope, $sce) {
    $scope.products = myapp.products;
    $scope.pager = $sce.trustAsHtml(myapp.pager);
    $scope.getProducts = function($event) {
        $event.preventDefault();
        var $link = $($event.target);
        var url = $event.target.href;
        $.getJSON(url, function(response) {
            $scope.$apply(function() {
                $scope.products = response.products;
                $scope.pager = $sce.trustAsHtml(response.pager);
            });
            history.pushState(response, "Index", url);
        });
    };
}]);
$(window).bind("popstate", function (e) {
    console.log(e.originalEvent.state);// I need scope here
});

You can see that clicking will call getProducts methods which will update $scope.products and $scope.pager. I am also doing history.pushState. Now, what I want, whenever user click the back button, I need to update $scope.products and $scope.pager again. Is that possible with AngularJS?

You should not be injecting HTML to create the pager, you should be doing it with angular instead. — Dalorzo, May 04 '14 at 17:33
You should not be using JQuery ajax($.get) you should be using $http instead — Dalorzo, May 04 '14 at 17:33
You should not be call $event.preventDefault() since it is an angular method — Dalorzo, May 04 '14 at 17:34
You should not be calling $scope.$apply inside an angular method if the method belongs to the scope angular will take care of it — Dalorzo, May 04 '14 at 17:35
You're mixing jQuery and Angular ...don't do that! That's only acceptable if you're trying to incorporate Angular into existing legacy code. User proper separation of concerns ... controllers are meant ONLY for writing to $scope. Create a service for backend calls an directives for DOM manipulation. — mortsahl, May 04 '14 at 17:38
@mortsahl, please let me know what should I do with this code — Imran Qadir Baksh - Baloch, May 04 '14 at 17:39

score 4 · Accepted Answer · edited May 23 '17 at 10:24

You are mixing Jquery and Angularjs. Now this can and often has been done as many useful libraries require Jquery.

But you are recreating a lot of Angular's functionality with Jquery here.

Firstly you should look at Angular's $routeProvider and $locationProvider.html5Mode(true); which will enable your app navigation and history really easily. Here is a good blog post to start with on this topic by Scotch.io.

Next up you are using Jquery's Ajax, instead use Angular's $http inside a service, which when used in a Single Page Application (explained in the above post) will allow your entire data to be persisted across page reloads (which become template swaps).

In general, go through the entire AngularJS Tutorial and look at how you can apply it's methodology to your app. It will save you a lot of time, as Angular is well thought out and deals with all of these issues you are trying to tackle right now. It does have a steep learning curve but persevere. You can always leave out the test driven development(which they push in the tutorial) for now and focus on the core concepts and features.

Also look at this popular post on moving from Jquery to Angular, it may help: "Thinking in AngularJS" if I have a jQuery background?

score 0 · Answer 2 · answered May 04 '14 at 18:57

0

For now I am fixing this using,

var $scope = angular.element('[ng-controller=ProductCtrl]').scope();

until I learn more.

answered May 04 '14 at 18:57

Imran Qadir Baksh - Baloch

32,612
68
179
322

Get AngularJs $scope in History popstate event?

2 Answers2

Linked