我想在调用各种Angular UI指令时向元素添加活动类.例如,当我调用popover时,我想突出显示元素(在此
case is a button中).我知道我可以添加带表达式的ng-click,但我想要一个更强大的解决方案.
我不知道如何修改directive(s),所以我能够获得目标元素并切换类.我创造了一个小提琴,我希望有人可以帮助这个.
我感谢帮助人员,谢谢.
解决方法
Angular不会限制您定义与ui-bootstrap中的指令同名的指令.这并不意味着你覆盖它们(尽管你可以),你只需要加以应用它们.只要您不破坏其原始功能,您就可以执行以下操作：
app.directive("popover",function () {
return {
restrict: 'EA',priority: -1000,// Run last
link: function (scope,element) {
element.addClass("my-popover");
scope.$watch('tt_isOpen',function (value) {
if (value) {
element.addClass("open");
} else {
element.removeClass("open");
}
});
}
};
});
app.directive("tooltip",element) {
element.addClass("my-tooltip");
scope.$watch('tt_isOpen',function (value) {
if (value) {
element.addClass("open");
} else {
element.removeClass("open");
}
});
}
};
});
然后定义样式,如：
.my-popover.open {
background-color: red;
}
.my-tooltip.open {
font-style:italic;
color: orange;
}
不幸的是,你有点依赖于原始的实现细节(这个tt_isOpen来自哪里).
看看here.
