Transclude then replace with angularjs

Question

I would like to create a directive that replaces :

   <my-overlay class="someOverlay">
      <h4>Coucouc</h4>
    </my-map-overlay>

With :

<div class="someOverlay default-overlay">
 <h4>Coucouc</h4>
</div>

The replace method is yet deprecated.

How to write a directive that manipules the DOM creating a div, adds the default-overlay class to the previous defined one, transcludes and replaces the <my-map> directive ?

Is it possible to divide the process as following : DOM manipulation in compile and transcluding in link?

Is it necessary for the myOverlay directive to be an element? Can you not restrict it to an attribute? — New Dev
– New Dev, Commented Oct 24, 2014 at 10:59

Cathal · Accepted Answer · 2014-10-24 11:05:11Z

1

This is the commit for 'replace' to be removed: https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb

If you read some of the last comments it seems that replace may not be deprecated after all. However this could be a way to achieve what uou want:

.directive('myOverlay', function(){
    return {
        restrict: 'E',
        template: '<div ng-transclude></div>',
        transclude: true,
        link: function (scope, element) {
            element.children()[0].setAttribute('class', element.attr('class') + ' default-overlay');
            element.replaceWith(element.children()[0]);
        }
    }
});

http://jsfiddle.net/b6ww0rx8/10/

answered Oct 24, 2014 at 11:05

Cathal

1,8001 gold badge18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Transclude then replace with angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related