Using AngularJS ngRepeat to dynamically render a series of iframes by tracking element changes

Question

Using AngularJS ngRepeat to dynamically render a series of iframes by tracking element changes

Currently, I am displaying a series of TinyMCE wysiwygs by utilizing the ng-repeat directive:

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

Upon rearranging the order of widgets in the controller, the instances of TinyMCE are automatically adjusted as well.

An issue arises due to the fact that the TinyMCE widget functions within an iframe and when it is relocated within the DOM, the iframe's state is reset.

As a solution, I must save the content of TinyMCE, remove TinyMCE from the element before relocating it, then reinitialize TinyMCE and reapply the saved content once the movement is complete.

I am seeking a straightforward method to somehow integrate into ng-repeat and designate callbacks for element movements.

If it becomes necessary to develop my own ng-repeat-custom directive, what would be the ideal structure for organizing event dispatching in AngularJS?

Should events be transmitted to child directives? Or should child directives (such as wysiwyg) subscribe to events from parent directives?

javascript angularjs iframe tinymce angularjs-ng-repeat

Answer 1

Answer №1

It's important to have open communication about directives from children to parents, ensuring that both parties understand and consider the full spectrum of directives.

Answer 2

It's important to have open communication about directives from children to parents, ensuring that both parties understand and consider the full spectrum of directives.

Answer 3

Answer №2

The issue at hand really comes down to "how can I trigger an action after ng-repeat has finished manipulating the DOM". After some searching, I stumbled upon a helpful solution in a related query: Calling a function when ng-repeat has finished

In my particular scenario, the controller handles modifications to the widgets list. This allows me to simply use $scope.emit('pre_move') and $scope.emit('after_move') events, which I can then manage within my wysiwyg directive.

An important aspect here is wrapping 'after_move' inside a $timeout() function! By doing so, it ensures that the execution will begin during the next digest cycle, giving you assurance that all DOM manipulations are completed by then.

Controller:

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

    $scope.widgets = [widget1, widget2]

    $scope.emit('pre_move'); 

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

   $timeout(function(){
        // Using $timeout wrapper is crucial to guarantee that the event will be emitted 
        // during the next digest cycle
        $scope.emit('post_move');
   })

}

Wysiwyg TinyMCE directive:

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

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

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

Answer 4

The issue at hand really comes down to "how can I trigger an action after ng-repeat has finished manipulating the DOM". After some searching, I stumbled upon a helpful solution in a related query: Calling a function when ng-repeat has finished

In my particular scenario, the controller handles modifications to the widgets list. This allows me to simply use $scope.emit('pre_move') and $scope.emit('after_move') events, which I can then manage within my wysiwyg directive.

An important aspect here is wrapping 'after_move' inside a $timeout() function! By doing so, it ensures that the execution will begin during the next digest cycle, giving you assurance that all DOM manipulations are completed by then.

Controller:

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

    $scope.widgets = [widget1, widget2]

    $scope.emit('pre_move'); 

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

   $timeout(function(){
        // Using $timeout wrapper is crucial to guarantee that the event will be emitted 
        // during the next digest cycle
        $scope.emit('post_move');
   })

}

Wysiwyg TinyMCE directive:

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

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

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

Using AngularJS ngRepeat to dynamically render a series of iframes by tracking element changes

Answer №1

Answer №2

Similar questions

Guide to utilizing a shared route function across various routes in express.js

Using an external call to trigger the revert method in jQuery UI

Utilize cascading styles with React's CSS modules

I'm having trouble with my controller - not sure what the problem is

Applying a custom class to a particular row in an AngularJS datatable using the created

Challenges with ExpressJS 4 middleware

Populating HTML elements with JSON data

Intercepting $http requests to customize API call URLs

iPhone height is not correct

Struggling to remove quotation marks from a string that was originally an array before being converted?

How can I make sure the return statement in getServerSideProps is only executed once all fetching operations are finished?

Guide to loading an image and incorporating it into a canvas using Gatsby's server-side rendering

Can you explain the significance of these vertices in the box geometry in THREE.js?

How can I modify the base color of a cone in Three.js?

Update the WooCommerce shopping cart page automatically upon product removal

Is it possible to add a tooltip to a div without using any JavaScript or JQuery?

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

Tips for altering the visibility of a different class on hover using jss

The issue of CSS translate3d causing performance slowdowns on mobile devices with large DOM structures

Issues with the functionality of the WordPress plugin