自定义行为 - 切换类 - 弹出框 - Angular UI bootstrap

Question

我想在调用各种Angular UI指令时向元素添加活动类。例如，当我调用弹出框时，我想突出显示该元素（在这种情况下，是一个按钮）。我知道我可以添加带有表达式的ng-click，但我想要更强大的解决方案。 我不确定如何修改指令以便能够获取目标元素并切换类。我创建了一个fiddle，希望有人能协助解决这个问题。 感谢您的帮助。

- user686483

---

小提琴不起作用。 - m.e.conroy

Answer 1

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", function () {
  return {
    restrict: 'EA',
    priority: -1000, // Run last
    link: function (scope, 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 到底是从哪里来的）。

在这里查看链接。

- Kos Prov

---

太好了。感谢你提供如此简洁的答案。非常有帮助。 - user686483

非常好。此外，如果您想更改工具提示文本，例如为其提供不同的字体，您可以在打开时获取下一个兄弟元素并向其添加类。 - zumalifeguard