在History popstate事件中获取AngularJs $范围？

Question

我是新手angularjs开发者。我有，

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
});

您可以看到单击将调用getProducts方法，这些方法将更新$ scope.products和$ scope.pager。我也在做history.pushState。现在，我想要的是，每当用户点击后退按钮时，我需要再次更新$scope.products和$scope.pager。 AngularJS有可能吗？

Answer 1

你正在混合Jquery和Angularjs。现在这可以而且经常已经完成，因为许多有用的库需要Jquery。

但是你在这里用Jquery重新创建了很多Angular的功能。

首先，你应该看看Angular的$routeProvider和$locationProvider.html5Mode(true);，这将使您的应用程序导航和历史记录非常容易。这是一个由Scotch.io开始讨论这个主题的good blog post。

接下来你使用Jquery的Ajax，而不是在$http中使用Angular的service，当在单页应用程序中使用时（在上面的帖子中解释）将允许你的整个数据在页面重新加载（它变成模板交换）中持久化。

一般来说，通过整个AngularJS Tutorial，看看如何将它的方法应用到您的应用程序。它将为您节省大量时间，因为Angular经过深思熟虑并处理您正在尝试解决的所有这些问题。它确实有一个陡峭的学习曲线但坚持不懈。您现在可以忽略测试驱动开发（他们在教程中推送），并专注于核心概念和功能。

另外看看这篇关于从Jquery转移到Angular的热门帖子，它可能有所帮助："Thinking in AngularJS" if I have a jQuery background?

Answer 2

现在我正在使用，

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

直到我了解更多。