2

私は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>

それでもうまくいきません。出力には何も表示されません..

4

2 に答える 2

1

AngularJs は、すべての通常のルーティングで URL にハッシュを使用します。これは、ページをナビゲートするデフォルトの方法です。Django などのバックエンド MVC フレームワークで行うのと同じように、routeProvider を使用して URL スキーマを定義すると、routeProvider はハッシュの変更をリッスンし、それに応じて新しいコンテンツをロードします。

チュートリアルを行うことをお勧めします。それはかなり良いです（たとえ多くのものを逃したとしても）。ルートはステップ 7で示されています。

ただの警告。Angular は、URL とルーティングを処理する主な方法としてハッシュを使用することを想定しているため、routeParams では、URL のハッシュ部分を変更するときにページの一部のみを変更することはできません。これを行うには、get parameters の使用に切り替えるか、より柔軟なui-router のようなものを使用します。

于 2013-11-12T08:39:09.680 に答える