Behavior customization - popover class switch - Angular Boot UI

Question

I want to add active classes to elements when various Angular UML directives are called. For example, when I call popover, I would like to highlight an 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 change the directive so that I can get the target element and switch the class. I created a violin and I was hoping someone would help with this.

I am grateful to the guys for their help, thank you.

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).

.