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 - i.e. v2.0)

Right now I'm considering in order of preference:

Not using a my-custom-slide directive
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?

possible duplicate of [Why is replace deprecated in AngularJS?](http://stackoverflow.com/questions/24194972/why-is-replace-deprecated-in-angularjs) — JoseM, Oct 03 '14 at 21:19
Mentioned my use case and referenced this SO question on the angular commit that deprecates the replace functionality: https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb — Steven Wexler, Oct 08 '14 at 03:43

score 1 · Accepted Answer · answered Oct 04 '14 at 07:19

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'.

answered Oct 04 '14 at 07:19

gkalpak

47,844
8
105
118

I think I'll just stick with the vanilla DOM nodes / boiler plate for now. But thanks for the suggestions and explanation. – Steven Wexler Oct 08 '14 at 01:46

Remove directive from the DOM

1 Answers1