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

Question

我想在调用各种 Angular UI 指令时向元素添加事件类。例如，当我调用 popover 时，我想突出显示该元素(在此 case is a button 中)。我知道我可以只添加带有表达式的 ng-click，但我想要一个更强大的解决方案。

我不知道如何修改 directive(s)所以我能够获得目标元素并切换类。我创建了一个 fiddle ，我希望有人可以提供帮助。

我感谢帮助家伙，谢谢。

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 到底是从哪里来的)。

看看 here .