Angular - 防止事件循环？答案

【问题标题】：Angular - Prevent event looping?Angular - 防止事件循环？
【发布时间】：2016-11-05 06:35:56
【问题描述】：

我需要您的帮助，因为我仍然无法处理事件。这是概念：

为了上下文化，假设我有视觉项目，我称之为“组件”。一个组件由 2 个 javascript 对象定义。一种是包含数据（如位置 x、y、宽度、高度、颜色等）。另一个是利用名为 draw2d 的 3rd 方库的视图。 Draw2d 使用它自己的 x y 宽度高度颜色等...属性。这意味着我需要“绑定”值以始终保持它们相等。

为此，我只使用事件。 draw2d 中有“on”事件让我观看这些修改。对于角度方面，我只是直接在我的数据绑定上使用 ng-model 指令。当数据更新时，我更新 draw2d 视图，当视图被编辑时，我更新我的数据。这部分工作正常，因为这并不难处理。

然后我尝试实现多选编辑。为此，我将每个选定的组件存储在一个数组中。当编辑视图或数据中的值时，我会触发一个事件，让每个选定的组件将相同的数据设置为相同的值。再次，它工作得很好。

当我开始努力奋斗的时候，就是我想要编辑位置的时候。我不希望每个组件都在彼此之上。为此，当我编辑多个 x 或 y 属性时，我不是定位元素，而是计算偏移量，以便每个组件仅以该偏移量移动。这是不好的地方。当然，当设置偏移量时，其他组件会更新，也会触发它们的新值，所以我陷入了地狱循环。

我想知道您是否知道任何处理事件的模式，以便当您有 2 个视图和一个模型时，您可以阻止事件传播。

这是我的传播 sn-p ：

scope.canvas.on('figureEdited', function (canvas, event) {
      if (scope.selectedComponents.length > 1) {
        var key = event.key;
        var value = event.value;
        var originComponent = event.origin;
        for (var i = 0; i < scope.selectedComponents.length; i++) {
          var selectedComponent = scope.selectedComponents[i];
          if (selectedComponent !== originComponent) {
            if (key !== 'x' && key !== 'y') {
              selectedComponent.setData(key, value);
            } else {
              var offset = value - event.oldValue;
              selectedComponent.setData(key, selectedComponent.getData(key) + offset, true);
            }
          }
        }
      }
    });

问题是由

引起的

selectedComponent.setData(key, selectedComponent.getData(key) + offset, true);

它重新触发一个 figureEdited 事件，使每个组件再次移动该偏移量，无限次（由 10 次摘要迭代停止）。

我希望这很清楚，很抱歉文字很长，非常感谢您的帮助:)

艾伦。

【问题讨论】：

你有没有在scope.canvas.on('figureEdited', function (canvas, event) { ...之后写event.stopPropagation()？
event 是我发出的自定义对象。它没有 stopPropagation() 方法:(

标签： angularjs events infinite-loop

【解决方案1】：

如果 setData 调用同步触发新事件，您可以通过设置忽略标志并在函数开始时检查它来忽略在循环中触发的事件。

var ignoreEvent = false;
scope.canvas.on('figureEdited', function (canvas, event) {
    if (ignoreEvent) return;
    ignoreEvent = true;

    //...

    ignoreEvent = false;
});

【讨论】：