我如何在AngularJs中处理hashchange事件

Question

I'm a newbie to AngularJs. 我是AngularJs的新手。 What I'm trying to do is update the page on hashchange events. 我想做的是在hashchange事件上更新页面。

What I currently do (and know is not the "right" way to go) is: 我目前正在做的事情（并且知道这不是“正确的”方法）：

<!DOCTYPE html>
<html>
<head>
<style>
    #hashdrop {
      display:block;
      border: 1px solid gray;
      width: 500px;
      overflow: auto;
      background-color: rgb(241,241,241);
      border-radius: 4px;
      text-align: center;
      vertical-align: middle;
      line-height: 100px;
      font-size: large;
      height: 100px;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    var example = function($scope) {
      $scope.lastHash = location.hash.slice(1);
      $(window).on('hashchange', function (event) {
        $scope.lashHash = location.hash.slice(1);
        $scope.$apply();
      });
    };
</script>
<meta charset=utf-8 />
</head>
<body ng-app ng-controller="example">
  <div id="hashdrop" >
    {{lastHash}}
  </div>
</body>
</html>

(This can be copy-pasted into a blank html file and run. jsbin didn't detect the haschange correctly, for me.) （可以将其复制粘贴到空白html文件中并运行。对我来说，jsbin未能正确检测到haschange。）

This doesn't really work. 这实际上是行不通的。 for some reason the value is not updated and I would assume there is a 'right' way to this in angularjs. 由于某种原因，该值未更新，因此我认为在angularjs中有一种“正确”的方法。
I would to understand how to do this right and more specifically how to correct the code in this example to work the "angular way". 我将了解如何正确执行此操作，更具体地说，如何在此示例中更正代码以使其“成角度地工作”。

Thanks! 谢谢！

UPDATE 1 Okay, After reading the comment about $location, I found some information and change my app to this: 更新1好的，在阅读了有关$ location的注释后，我找到了一些信息并将我的应用程序更改为：

<!DOCTYPE html>
<html>
<head>
<style>
    #hashdrop {
      display:block;
      border: 1px solid gray;
      width: 500px;
      overflow: auto;
      background-color: rgb(241,241,241);
      border-radius: 4px;
      text-align: center;
      vertical-align: middle;
      line-height: 100px;
      font-size: large;
      height: 100px;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    angular.module('example',[]).config(function($locationProvider, $routeProvider) {
      $locationProvider.html5Mode(true);
    });
    var example = function($scope, $location) {


    };
</script>
<meta charset=utf-8 />
</head>
<body ng-app="example" ng-controller="example">
  <div id="hashdrop" >
    Hash = {{$location.hash()}}
  </div>
</body>
</html>

Still doesn't work. 仍然不起作用。 Nothing shows in output.. 什么都没有显示在输出中。

Answer 1

AngularJs uses hashes in urls for all normal routing, it's the default way of navigating the page. AngularJs在所有正常路由中使用url中的哈希，这是浏览页面的默认方式。 You use the routeProvider to define url-schemas much like you would in back end MVC frameworks like Django, and the routeProvider will listen for changes in the hash and load new content accordingly. 您可以像在后端MVC框架（如Django）中那样使用routeProvider来定义url方案，并且routeProvider会侦听哈希中的更改并相应地加载新内容。

I suggest doing the tutorial. 我建议做本教程。 It is fairly good (even if it misses a lot of stuff). 这是相当不错的（即使它错过了很多东西）。 Routes are demonstrated in step 7 . 步骤7中将演示路线。

Just warning. 只是警告。 Angular assumes that you use hashes as your main way to handle urls and routing, so routeParams will not let you change only part of a page when changing the hash part of the url. Angular假定您使用哈希作为处理URL和路由的主要方式，因此，在更改URL的哈希部分时，routeParams不会仅更改页面的一部分。 To do that you would either switch to using get parameters or use something like ui-router which is more flexible. 为此，您可以切换到使用get参数，也可以使用更灵活的ui-router之类的东西。

Answer 2

You can bind to the hashchange event using angular.element instead of jQuery, potentially reducing dependencies. 您可以使用angular.element而不是jQuery绑定到hashchange事件，从而可能减少依赖关系。

Include this in your controller. 将此包含在您的控制器中。

angular.element(window).bind('hashchange', function() {
  console.log('hash has changed');
});

This code will log "hash has changed" when the hash changes. 哈希更改时，此代码将记录“哈希已更改”。

Not sure it will solve your problem (there's some more funky stuff in your code, as Kevin Beal pointed out), but it's kind of unclear what you're saying "doesn't work". 不确定是否可以解决您的问题（正如Kevin Beal所指出的那样，您的代码中还有一些更时髦的东西），但是您不清楚您在说什么“不起作用”。

Worth noting that angular.element uses jQuery if it's available , so if you want to use jQuery anyways, angular.element(window) won't do anything differently than $(window) . 值得一提的是angular.element 使用jQuery（如果可用），因此，无论如何要使用jQuery， angular.element(window)与$(window)不会做任何不同的事情。

我如何在AngularJs中处理hashchange事件

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-11-12 08:39:09

解决方案2
0 2018-04-12 17:21:59

我如何在AngularJs中处理hashchange事件

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-11-12 08:39:09

解决方案2 0 2018-04-12 17:21:59

解决方案1
1 已采纳 2013-11-12 08:39:09

解决方案2
0 2018-04-12 17:21:59