AngularJS ngRepeat - 监听元素移动（我需要使用 ngRepeat 呈现 iframe 列表）答案

【问题标题】：AngularJS ngRepeat - listening to element movement (I need to render a list of iframes with ngRepeat)AngularJS ngRepeat - 监听元素移动（我需要使用 ngRepeat 呈现 iframe 列表）
【发布时间】：2023-03-23 02:07:02
【问题描述】：

我正在使用 ng-repeat 指令呈现 TinyMCE 所见即所得的列表：

<div ng-repeat="widget in wigdets">
   <textarea wysiwyg></textarea> <!-- This is a directive to initialize TinyMCE -->
</div>

当我更改控制器中小部件的顺序时，TinyMCE 的实例会自动重新排列。

问题在于 TinyMCE 小部件是一个 iframe，当它在 DOM 中移动时，iframe 状态会被重置。

所以我需要保存 TinyMCE 内容并在移动之前从元素中删除 TinyMCE，然后再次初始化 TinyMCE，并在移动完成后应用保存的内容。

是否有一种简单的方法可以以某种方式连接到 ng-repeat 并为元素移动注册回调？

如果我必须编写自己的 ng-repeat-custom 指令，那么以角度方式组织事件调度的正确架构是什么？

我应该以某种方式将事件发送到子指令吗？或者子指令（在我的例子中是 wysiwyg）是否应该订阅父指令的事件？

【问题讨论】：

标签： javascript angularjs iframe tinymce angularjs-ng-repeat

【解决方案1】：

应讨论对父母的子指令，并最终包括用于两个实体的完整指令圈。

【讨论】：

也许你可以详细说明。

【解决方案2】：

问题实际上归结为“当 ng-repeat 完成 DOM 操作时我如何做某事”。我在类似的问题中找到了答案：Calling a function when ng-repeat has finished

就我而言，这很简单，因为控制器负责修改小部件列表。所以我可以简单地发出$scope.emit('pre_move') 和$scope.emit('after_move') 事件，然后在我的wysiwyg 指令中处理它们。

重要的是把 'after_move' 包裹在 $timeout() 中！它保证执行将在下一个摘要周期开始，您可以确定所有 DOM 操作都在那个时候完成。

控制器：

function controller($scope, $timeout) {
    var widget1 = new Widget();
    var widget2 = new Widget();

    $scope.widgets = [widget1, widget2]

    $scope.emit('pre_move'); 

   // Shuffle widgets
   $scope.widgets[0] = widget2;
   $scope.widgets[1] = widget1;

   $timeout(function(){
        // $timeout wrapper is required to ensure that event will be emited 
        // in the next digest cycle
        $scope.emit('post_move');
   })

}

所见即所得的 TinyMCE 指令：

link: function(scope, element, attrs) {
      ...

      var content;
      scope.on('pre_move', function() {
         content = element.html();
         element.tinymce().remove; // remove TinyMCE before movement
      });

      var content;
      scope.on('post_move', function() {
         element.tinymce().html(content); // reinitialize TinyMCE after movement
      });
}

【讨论】：