Customising behaviour - toggle class- popover - Angular UI bootstrap

Question

I'm wanting to add active classes to elements when various Angular UI directives are called. For example when I call the popover i'd like to highlight the element (which in this case is a button). I know that I can just add ng-click with an expression but I want a more robust solution.

I'm not sure how to modify the directive(s) so I'm able to obtain the target element and toggle the class. I have created a fiddle and I was hoping that someone can assist with this.

I appreciate the help guys, thanks.

Answer 1

Angular does not restrict you from defining directives with the same name as those in ui-bootstrap. That does not mean you override them (although you could), you merely apply them additively. As long as you don't break their original functionality, you can do something like:

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");
        }
      });
    }
  };
});

And then define styles like:

.my-popover.open {
    background-color: red; 
}

.my-tooltip.open {
    font-style:italic;
    color: orange;
}

Unfortunately, you are a bit dependent on the original implementation details (where on earth did this tt_isOpen came from).

Check it out here.