5

この現在の問題を解決する方法がわかりません。ページに 5 つのタブがあります。各タブは、ルーティングと ng-view を介して新しいページとコントローラーをロードします。次のタブに移動する前に、いくつかの機能を完了するために、各タブに $locationChangeStart があります。ただし、ユーザーが前のタブに戻ると、いくつかの問題が発生します。タブで行うことをすべて終了して別のタブに切り替えると、 $locationChangeStart 関数が何度も起動されます。元のタブからタブを切り替えるたびに、新しいコントローラーが作成されているようです。

それで：

  • 現在のタブ = A
  • 新しいタブに切り替える (B)
  • $locationChangeStart は期待どおりに起動します
  • タブ A に戻る
  • $locationChangeStart が再びタブ A に対して発生します (私はもうそのページにいないので予期していませんでしたが、大丈夫です)
  • 新しいタブに切り替える (C)
  • 2 $locationChangeStart 火災。1 つは新しいスコープ、もう 1 つは最初にタブにアクセスしたときの元のスコープです。

このプロセスは、タブ A から に切り替えると無限に発生し、呼び出し回数は毎回 1 ずつ増えます。

plunker:動作デモ

index.html:

<div ng-controller="visitController">
  <h3>ng-view demo</h3>

  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#/Information">Information</a>
    </li>
    <li><a href="#/Fingerprint">Fingerprint</a></li>
    <li><a href="#/Agenda">Agenda</a></li>
    <li><a href="#/Logistics">Logistics</a></li>
  </ul>

  <div ng-view>
  </div>
</div>

タブ 1:

<div ng-controller="InformationController">
    This is the information tab.
</div>

タブ 2:

<div>
    This is the Fingerprint tab.
</div>

メインページjs:

angular.module('app', []).config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
  $routeProvider.when('', {
      templateUrl: "Information.html",
      controller: visitController
  }).when('/Information', {
      templateUrl: "Information.html",
      controller: visitController
  }).when('/Fingerprint', {
      templateUrl: "Fingerprint.html",
      controller: visitController
  })

  $routeProvider
    .otherwise('/Information', {
      redirectTo: "Information.html"
    });
  }
]);

function visitController($scope, $http, $window, $route, $rootScope) {

}

タブ 1 JS

function InformationController($scope, $http, $window, $route, $rootScope) {
  $scope.activated = 0;
  $rootScope.$on('$locationChangeStart', function (event) {
      $scope.activated++;
      alert($scope.activated);
  });
}
4

1 に答える 1

5

これは、イベント リスナーを $scope ではなく $rootScope にアタッチしているためです。

InformationControllerがロードされるたびに、新しいイベント$locationChangeStartリスナーを$rootScope.

タブを切り替えても、$rootScope は再読み込みされず、そのまま維持されるため、毎回同じイベント リスナーを追加し続けるだけです。5 回目の [情報] タブに切り替えた後、5 つのリスナーが作成され、リッスンするようになりました。

$rootScope の代わりに $scope を使用します。これは、ルートが変更されたときに $destroyed を取得し、以前のリスナーをクリアします。

于 2013-07-07T17:08:56.523 に答える