javascript - 在历史 popstate 事件中获取 AngularJs $scope？

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);这将使您的应用程序导航和历史记录变得非常容易。这是一个 good blog post从 Scotch.io 的这个主题开始。

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

一般来说，遍历整个AngularJS Tutorial并查看如何将其方法应用于您的应用。它会为你节省很多时间，因为 Angular 经过深思熟虑，可以处理你现在正试图解决的所有这些问题。它确实有一个陡峭的学习曲线，但要坚持。您现在始终可以忽略测试驱动开发(他们在教程中推出)并专注于核心概念和功能。

另请参阅这篇关于从 Jquery 迁移到 Angular 的热门帖子，它可能会有所帮助:"Thinking in AngularJS" if I have a jQuery background?