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ハンドラーをデバウンスする可能性がありますが、私は、共通のサービスのロジックを使用して別のコントローラーを作成するだけです。あるいは、ベースコントローラーと子コントローラー(それらの間の継承)

関連記事