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

直到我了解更多。

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

2 个答案: