Javascript 如何处理AngularJs中的hashchange事件_Javascript_Angularjs_Hashchange

Javascript 如何处理AngularJs中的hashchange事件

javascript angularjs

Javascript 如何处理AngularJs中的hashchange事件,javascript,angularjs,hashchange,Javascript,Angularjs,Hashchange,我是AngularJs的新手。我想做的是更新hashchange事件的页面我目前所做的（我知道这不是正确的）是： #散列{ 显示：块；边框：1px纯色灰色；宽度：500px；溢出：自动；背景色：rgb（241）；边界半径：4px；文本对齐：居中；垂直对齐：中间对齐；线高：100px；字体大小：大号；高度：100px； } 变量示例=函数（$scope）{ $scope.lastHash=location.hash.slice（1）； $（窗口）.on（'hashchan

我是AngularJs的新手。我想做的是更新hashchange事件的页面

我目前所做的（我知道这不是正确的）是：


#散列{
显示：块；
边框：1px纯色灰色；
宽度：500px；
溢出：自动；
背景色：rgb（241）；
边界半径：4px；
文本对齐：居中；
垂直对齐：中间对齐；
线高：100px；
字体大小：大号；
高度：100px；
}
变量示例=函数（$scope）{
$scope.lastHash=location.hash.slice（1）；
$（窗口）.on（'hashchange'，函数（事件）{
$scope.lashHash=location.hash.slice（1）；
$scope.$apply（）；
});
};
{{lastHash}}

（这可以复制粘贴到一个空白的html文件中并运行。对我来说，jsbin没有正确地检测到haschange。）

这真的不管用。由于某些原因，该值没有更新，我假设angularjs中有一种“正确”的方法我想了解如何正确地执行此操作，更具体地说，如何更正此示例中的代码以“角度方式”工作

谢谢

更新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>


#散列{
显示：块；
边框：1px纯色灰色；
宽度：500px；
溢出：自动；
背景色：rgb（241）；
边界半径：4px；
文本对齐：居中；
垂直对齐：中间对齐；
线高：100px；
字体大小：大号；
高度：100px；
}
angular.module（'example'，[]）.config（函数（$locationProvider，$routeProvider）{
$locationProvider.html5Mode（true）；
});
变量示例=函数（$scope，$location）{
};
哈希={{$location.Hash（）}}

还是不行。输出中没有显示任何内容。

AngularJs在URL中使用哈希进行所有正常路由，这是导航页面的默认方式。您可以使用routeProvider来定义url模式，就像在Django这样的后端MVC框架中一样，routeProvider将侦听哈希中的更改并相应地加载新内容

我建议做这个教程。这是相当好的（即使它错过了很多东西）。路线在中演示

只是警告而已。Angular假设您使用散列作为处理url和路由的主要方式，因此routeParams不允许您在更改url的散列部分时仅更改页面的一部分。要做到这一点，您可以切换到使用get参数，或者使用更灵活的类似方法。

您可以使用

angular.element

而不是jQuery绑定到hashchange事件，这可能会减少依赖性

将其包含在控制器中

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

当散列更改时，此代码将记录“散列已更改”

不确定它是否能解决您的问题（正如Kevin Beal所指出的，您的代码中有一些更时髦的东西），但不清楚您所说的“不起作用”

值得注意的是，

angular.element

，因此如果您想使用jQuery，

angular.element（window）

与

$（window）

没有什么不同，为什么不使用routeChange事件来获取路由更改通知更多信息呢？在这里，您不会在作用域上公开

$location

。没有名为

$location

的

$scope

型号。

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