我如何在AngularJs中處理hashchange事件

Question

我是AngularJs的新手。 我想做的是在hashchange事件上更新頁面。

我目前正在做的事情（並且知道這不是“正確的”方法）：

<!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>

（可以將其復制粘貼到空白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>

仍然不起作用。 什么都沒有顯示在輸出中。

Answer 1

AngularJs在所有正常路由中使用url中的哈希，這是瀏覽頁面的默認方式。 您可以像在后端MVC框架（如Django）中那樣使用routeProvider來定義url方案，並且routeProvider會偵聽哈希中的更改並相應地加載新內容。

我建議做本教程。 這是相當不錯的（即使它錯過了很多東西）。 步驟7中將演示路線。

只是警告。 Angular假定您使用哈希作為處理URL和路由的主要方式，因此，在更改URL的哈希部分時，routeParams不會僅更改頁面的一部分。 為此，您可以切換到使用get參數，也可以使用更靈活的ui-router之類的東西。

Answer 2

您可以使用angular.element而不是jQuery綁定到hashchange事件，從而可能減少依賴關系。

將此包含在您的控制器中。

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

哈希更改時，此代碼將記錄“哈希已更改”。

不確定是否可以解決您的問題（正如Kevin Beal所指出的那樣，您的代碼中還有一些更時髦的東西），但是您不清楚您在說什么“不起作用”。

值得一提的是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