【发布时间】: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)
现在我正在考虑按优先顺序排列:
- 不使用 my-custom-slide 指令
- 提交增强 idangerous.swiper.js 的拉取请求以支持此用例
我更喜欢第三个选项,它是一种不被弃用的 Angular 方法,可以从 DOM 中删除 my-custom-slide 元素。这存在吗?如果它不存在,有人可以解释或指向我关于为什么不推荐使用替换功能的文档吗?
【问题讨论】:
-
提到了我的用例,并在弃用替换功能的角度提交上引用了这个 SO 问题:github.com/angular/angular.js/commit/…
标签: javascript angularjs dom angularjs-directive swiper