javascript - ng-repeat内で呼び出されたAngular $ broadcastが複数回起動する

原文 javascript angularjs forms broadcast

$ scope。$ broadcastを含むいくつかのことを行う関数をそのクリックイベントが呼び出すボタンを持つng-repeatにフォームをネストしました。 ng-repeatのアイテムごとにトリガーされるブロードキャストを除いて、関数内のすべてが1回トリガーされます。

ボタンをリピートの外に移動できない、またはフォームとデータ参照が失われる。基本的な設定を示すデモplunkerがあります。入力の1つに値を入力し、コンソールを監視しながら[次へ]をクリックすると、ブロードキャストが複数回(ng-repeatアイテムごとに1回)起動するのがわかります。必要なのは、デモコードに従って検証チェック用のフォームへの参照を維持しながら、ブロードキャストを1回だけ起動する方法です。

ここにJSがあり、残りはplunkerにあります:

(function () {
var app = angular.module('App', []),
  /** manually triggers $validate event to validate the given form */
isFormValid = function ($scope, ngForm) {
  var i = null;
  //$scope.$emit('$validate');
  $scope.$broadcast('$validate');

  if(! ngForm.$invalid) {
    return true;
  } else {
    // make the form fields '$dirty' so that the validation messages would be shown
    ngForm.$dirty = true;

    for(i in ngForm) {
      if(ngForm[i] && ngForm[i].hasOwnProperty && ngForm[i].hasOwnProperty('$dirty')) { // TODO: is 'field.$invalid' test required?
        ngForm[i].$dirty = true;
      }
    }
  }
};

app.controller('appCtrl', ['$scope', function ($scope) {


    $scope.wizardStep = 1;
    $scope.nextStep = function () {
      var ngForm = $scope['stepForm_' + $scope.wizardStep];
      if(isFormValid($scope, ngForm)) { // trigger manual validation
        $scope.wizardStep++;
      }
    };
    $scope.prevStep = function () {
      $scope.wizardStep--;
    };
    $scope.submit = function () {
      var ngForm = $scope['stepForm_' + $scope.wizardStep]; // we can make this line common
      if(isFormValid($scope, ngForm)) {
        alert('Form is valid. Submitting...');
      }
    };

  }]);
})();


ヘルプやアイデアは大歓迎です。HTMLのスタイルやデモコードの他の側面などはノーノーです。私は単にそれらのことを行って、プランカーをより速く取得しました。

TIA
答え
イベントは一度だけ発生します。問題は、testCtrlが3回使用されているため、イベントを3回キャッチしていることです。

ステップごとに個別のコントローラーを作成する必要があります。本当に必要な場合は、ハックが$ onハンドラーをデバウンスする可能性がありますが、私は、共通のサービスのロジックを使用して別のコントローラーを作成するだけです。あるいは、ベースコントローラーと子コントローラー(それらの間の継承)
関連記事

javascript - session.lastAccessedTimeをJavaScript日付オブジェクトに変換します

javascript - javascript 4ボタン、2動作

javascript - ExpressおよびCheerio / JSDOM

javascript - ifが機能しない場合のclearInterval

javascript - ReactJS-複数の要素へのsetState

javascript - php:// stdinが余分な文字を読み取る

javascript - (AngularJS)UI-Routerのセットアップ後にインジェクションが機能しない

javascript - AngularJSでタッチ/ドラッグを開始するときにメソッドを呼び出す方法

javascript - 1番目のテキストフィールドのラジオボタンをクリックしている間、2番目のテキストフィールドは非アクティブである必要があります

javascript - 階層グリッドでネストされたKendo UIデータソースのデータをフィルターする方法