angularjs - AngularJSで$broadcastイベントを停止する方法は？

Question

$broadcastイベントがスコープチェーンを下るのを防ぐための組み込みの方法はありますか？

イベントによって渡されるイベントオブジェクトにはメソッド$broadcastがありません（ $ rootScopeのドキュメントに記載されています）。ただし、このマージされたプルリクエストは、イベントがそれらを呼び出すことができることを示しています。stopPropagation$broadcaststopPropagation

Answer 1

angleJS 1.1.2ソースコードからのスニペット：

$emit: function(name, args) {
    // ....
    event = {
        name: name,
        targetScope: scope,
        stopPropagation: function() {
            stopPropagation = true;
        },
        preventDefault: function() {
            event.defaultPrevented = true;
        },
        defaultPrevented: false
    },
    // ....
}

$broadcast: function(name, args) {
    // ...
    event = {
        name: name,
        targetScope: target,
        preventDefault: function() {
            event.defaultPrevented = true;
        },
        defaultPrevented: false
    },
    // ...
}

ご覧のとおり、$broadcastのイベントオブジェクトには「stopPropagation」がありません。

stopPropagationの代わりに、preventDefaultを使用して、イベントを「このイベントを処理する必要がない」とマークすることができます。これはイベントの伝播を停止しませんが、子スコープに「このイベントを処理する必要はありません」と通知します。

例： http： //jsfiddle.net/C8EqT/1/

Answer 2

ブロードキャストにはstopPropagationメソッドがないため、defaultPreventedプロパティを使用する必要があります。これは、再帰ディレクティブで意味があります。

ここでこのプランカーを見てください：プランカー

$scope.$on('test', function(event) { if (!event.defaultPrevented) { event.defaultPrevented = true; console.log('Handle event here for the root node only.'); } });

Answer 3

私はこの目的のためにイベント泥棒を実装しました：

.factory("stealEvent", [function () {

  /**
   * If event is already "default prevented", noop.
   * If event isn't "default prevented", executes callback.
   * If callback returns a truthy value or undefined,
   * stops event propagation if possible, and flags event as "default prevented".
   */
  return function (callback) {
    return function (event) {
      if (!event.defaultPrevented) {
        var stopEvent = callback.apply(null, arguments);
        if (typeof stopEvent === "undefined" || stopEvent) {
          event.stopPropagation && event.stopPropagation();
          event.preventDefault();
        }
      }
    };
  };

}]);

使用するには：

$scope.$on("AnyEvent", stealEvent(function (event, anyOtherParameter) {
  if ($scope.keepEvent) {
    // do some stuff with anyOtherParameter
    return true; // steal event
  } else {
    return false; // let event available for other listeners
  }
}));

$scope.$on("AnyOtherEvent", stealEvent(function (event, anyOtherParameter) {
  // do some stuff with anyOtherParameter, event stolen by default
}));