我创建了一个指令,它创建一个带有ul元素的弹出窗口,但是ng-class = isVisible没有返回正确的值。它是有效的,如果我在我的页面上只使用了一个指令,但是当它在多个时,它不起作用。
我的问题是,使用此范围函数时不会更新ngClass。
function _isElementVisible(el, parent) {
var eap,
rect = el.getBoundingClientRect(),
docEl = parent,
vWidth = docEl.clientWidth,
vHeight = docEl.clientHeight,
efp = function (x, y) { return document.elementFromPoint(x, y) },
contains = "contains" in el ? "contains" : "compareDocumentPosition",
has = contains == "contains" ? 1 : 0x14;
// Return false if it's not in the viewport
if (rect.right < 0 || rect.bottom < 0
|| rect.left > vWidth || rect.top > vHeight)
return false;
// Return true if any of its four corners are visible
return (
(eap = efp(rect.left, rect.top)) == el || el[contains](eap) == has
|| (eap = efp(rect.right, rect.top)) == el || el[contains](eap) == has
|| (eap = efp(rect.right, rect.bottom)) == el || el[contains](eap) == has
|| (eap = efp(rect.left, rect.bottom)) == el || el[contains](eap) == has
);
}
scope.isVisible = function (index) {
if (!scope.active)
return false;
return _isElementVisible(jqElm.find('.modal li')[index], jqElm.find('.modal')[0]);
}
<li ng-repeat="item in items" ng-class="{'visible': isVisible($index)}"></li>