AngularJS ngRepeat - 聽元素運動（我需要渲染ngRepeat I幀列表）

我渲染TinyMCE的列表wysiwygs使用NG-重複指令：AngularJS ngRepeat - 聽元素運動（我需要渲染ngRepeat I幀列表）

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

當我更改順序控制器中的小部件，TinyMCE的實例會相應地自動重新排列。

問題是，TinyMCE小部件是一個iframe，iframe狀態在DOM中移動時被重置。

所以我需要保存TinyMCE的內容，並從元素中移除TinyMCE，然後再次初始化TinyMCE並在移動完成後應用保存的內容。

有沒有一種簡單的方法來掛鉤到ng-repeat併爲元素移動註冊回調？

如果我必須編寫自己的ng-repeat-custom指令，以角度方式組織事件分派的正確架構是什麼？

我應該以某種方式將事件發送給子指令？或者應該兒童指令（wysiwyg在我的情況）訂閱家長指令的事件？

來源

2014-02-19 dr.scre

應該討論父指令，並最終包含使用這兩個實體的完整指令。

來源

2014-02-20 02:09:46 user3330757

也許你可以詳細說明了。 – cpburnz

這個問題實際上歸結爲「當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 
     }); 
}

來源

2014-02-20 20:27:34

AngularJS ngRepeat - 聽元素運動（我需要渲染ngRepeat I幀列表）

回答

相關問題