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

Question

我想在调用各种Angular UI指令时向元素添加活动类.例如,当我调用popover时,我想突出显示元素(在本例中是一个按钮).我知道我可以添加带表达式的ng-click,但我想要一个更强大的解决方案.

我不知道如何修改指令,所以我能够获得目标元素并切换类.我创造了一个小提琴,我希望有人可以帮助这个.

我感谢帮助人员,谢谢.

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是从哪里来的).

检查它在这里.