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

我是新手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可以实现吗?

你正在混合JqueryAngularjs 。 现在这可以而且经常被完成,因为许多有用的库需要Jquery

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

首先你应该看一下Angular的$routeProvider$locationProvider.html5Mode(true); 这将使您的应用程序导航和历史记录非常容易。 这是Scotch.io关于这个主题的一篇很好的博客文章 。

接下来你使用Jquery的Ajax ,而不是在服务中使用Angular的$http ,当在单页应用程序中使用时(在上面的post中解释)将允许你的整个数据在页面重新加载(它成为模板交换)中持久化。

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

另外看看这篇关于从Jquery转移到Angular的热门post, 如果我有jQuery背景 ,它可能会有所帮助: “在AngularJS中思考”?

现在我正在使用,

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

直到我了解更多。