获取历史popstate事件AngularJs $范围是什么？ [英] Get AngularJs $scope in History popstate event?

问题描述

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

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

您可以看到，点击后会调用的getProducts方法whihc将更新$ scope.products和$ scope.pager。我也做history.pushState。现在，我想要什么，只要用户点击后退按钮，我需要更新$ scope.products又一次$ scope.pager。这是可能与AngularJs？

You can see that clicking will call getProducts methods whihc 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?

推荐答案

您在混合 Jquery的和 Angularjs 。现在，这个可以和经常已经做了许多有用的库要求 Jquery的。

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

但你重新创建的很多角度的使用jQuery在这里的功能

首先你应该看看角的 $ routeProvider 和 $ locationProvider.html5Mode（真）; 这将真正轻松地在您的应用程序的导航和历史。
这里是href=\"http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating\" rel=\"nofollow\">好的博客帖子到

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.

接下来你使用jQuery的阿贾克斯，而是使用角度的的 $ HTTP 一个的服务，这在一个单页应用程序（在上面的帖子解释）使用时，可以让你的整个数据在整个页面重新加载（这成为模板掉期）是持久的。

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).

在一般情况下，经过全 AngularJS教程看看如何应用它的方法为您的应用即可。它将为您节省大量的时间，因为角度是经过深思熟虑的，并处理所有​​的这些问题，你想马上解决。它有一个陡峭的学习曲线，但坚持下去。您可以随时离开了测试驱动开发（他们在本教程推动），为现在和专注于核心概念和功能。

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.

另外，也要看看这个流行后从jQuery的转向角，它可以帮助：<一href=\"http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background\">How做I＆QUOT;认为AngularJS＆QUOT;如果我有一个jQuery的背景是什么？

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

这篇关于获取历史popstate事件AngularJs $范围是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！