【问题标题】:Remove directive from the DOM从 DOM 中删除指令
【发布时间】:2014-10-03 20:05:44
【问题描述】:

我正在使用名为 Swiper 的第三方库。 idangero.us.swiper.js 似乎不能很好地处理保留在 DOM 中的元素指令,因为它假定“slide”元素将是“wrapper”元素的直接子元素。

来自 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]);
            }
        }
    }
}

有效的 DOM:

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

无效的 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>

我想创建一个 myCustomSlide 指令来减少样板,集中一些 css 等。为此,我似乎需要从 DOM 中排除我的指令元素,以便实际的“swiper-slide " 元素将在_this.wrapper.childNodes 中。我查看了directive's replace functionality。看起来它完全符合我的要求。但是,它似乎已被弃用。所以我不想用它。

替换([已弃用!],将在下一个主要版本中删除 - 即 v2.0)

现在我正在考虑按优先顺序排列:

  1. 不使用 my-custom-slide 指令
  2. 提交增强 idangerous.swiper.js 的拉取请求以支持此用例

我更喜欢第三个选项,它是一种不被弃用的 Angular 方法,可以从 DOM 中删除 my-custom-slide 元素。这存在吗?如果它不存在,有人可以解释或指向我关于为什么不推荐使用替换功能的文档吗?

【问题讨论】:

标签: javascript angularjs dom angularjs-directive swiper


【解决方案1】:

replace 已被弃用,因为为了使其正常运行,需要进行大量的簿记工作并考虑极端情况。

如果您有一个特定的用例(就像您所做的那样)并且您知道自定义幻灯片没有什么太花哨的事情,您可以手动将其替换为模板。 (如果没有更多详细信息,我无法确定这是否适合您的情况。)

另一种解决方案可能是使用restrict: 'A' 定义您的指令。

【讨论】:

  • 我想我现在会坚持使用原版 DOM 节点/样板。但是感谢您的建议和解释。
猜你喜欢
  • 1970-01-01
  • 2015-08-26
  • 1970-01-01
  • 2016-10-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-06
  • 2016-06-19
相关资源
最近更新 更多