Remove directive from the DOM

Question

I am using a third party library called Swiper . idangero.us.swiper.js seems to not play nicely with element directives that remain in the DOM because it assumes that "slide" elements will be direct children for the "wrapper" element.

From idangerous.swiper.js:

for (var i = 0; i < _this.wrapper.childNodes.length; i++) {
    if (_this.wrapper.childNodes[i].className) {
        var _className = _this.wrapper.childNodes[i].className;
        var _slideClasses = _className.split(/\s+/);
        for (var j = 0; j < _slideClasses.length; j++) {
            if (_slideClasses[j] === params.slideClass) {
                _this.slides.push(_this.wrapper.childNodes[i]);
            }
        }
    }
}

Valid DOM:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            Slide 1
        </div>
        <div class="swiper-slide">
            Slide 2
        </div>
    </div>

Invalid DOM:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <my-custom-slide>
            <div class="swiper-slide">
                Slide 1
            </div>
        </my-custom-slide>
        <my-custom-slide>
            <div class="swiper-slide">
                Slide 2
            </div>
        </my-custom-slide>
    </div>
</div>

I'd like to create a myCustomSlide directive to reduce boiler plate, centralize some css, etc. To do so, it seems I'll need to exclude my directive element from the DOM so the actual "swiper-slide" elements will be in _this.wrapper.childNodes . I looked into a directive's replace functionality . It seems like it would fit my requirements perfectly. However, it appears to have been deprecated. So I don't want to use it.

replace ([DEPRECATED!], will be removed in next major release - ie v2.0)

Right now I'm considering in order of preference:

1. Not using a my-custom-slide directive
2. Submitting a pull request that enhances idangerous.swiper.js to support this use case

I'd prefer a third option which would be a non deprecated Angular way to remove the my-custom-slide element from the DOM. Does this exist? If it doesn't exist, can someone explain or point me to documentation about why the replace functionality is being deprecated?

Answer 1

replace is being deprecated because in order for it to behave correctly there is a lot of bookkeeping to be done and corner-cases to be taken into account.

If you have a specific usecase (as you do) and you know there is nothing too fancy going on with your custom slide you could manually replace it with the template. (I can't be sure if this appropriate in your case without more details.)

Another solution might be defining your directive with restrict: 'A' .