Angular js: how to use ngMousedown ngMouseup

Question

Is it possible to use ngMousedown for adding class to a div and ngMouseup for removing the class again? At the moment I use ng-mousedown="activateClass()" , in activateClass() change $scope.className="data-active" and change it again with other function with ng-mouseup. And use ng-class to add the class "data-active" I don't wanna use $scope.className and change it with function in controller, because this function is used for several divs and I don't want to add the class to all of the divs I have.

Thank you.

Answer 1

Normally controllers should not care about your DOM. What you are trying to do there seems more like suitable for a directive. I would implement a directive:

app.directive("highlight", function() {
  return function(scope, element, attrs) {
    element.on('mouseup', function(event) {
      element.removeClass(attrs.highlight)
    })
    element.on('mousedown', function(event) {
      element.addClass(attrs.highlight)
    })
  }
})

and use it on a div like this

 <div highlight="active">
      my content is here
 </div>

where as active is the name of my css class.