Angular js：如何使用ngMousedown ngMouseup [英] Angular js: how to use ngMousedown ngMouseup

问题描述

是否可以使用ngMousedown将类添加到div，ngMouseup用于再次删除类？
目前我使用 ng-mousedown =activateClass（），在activateClass（）中更改 $ scope.className =data-active它再次与ng-mouseup的其他功能。并使用ng-class添加类data-active
我不想使用$ scope.className和更改它与控制器中的函数，因为此函数用于几个div，我不想

解决方案

div>

通常控制器不应该关心你的DOM。你在那里试图做的似乎更适合一个指令。我将实现一个指令：

  app.directive（highlight，function（）{
 return function ，element，attrs）{
 element.on（'mouseup'，function（event）{
 element.removeClass（attrs.highlight）
}）
 element.on mousedown'，function（event）{
 element.addClass（attrs.highlight）
}）
} 
}）
  pre> 
 
 
并在这样的div上使用它
  div highlight =active> 
我的内容在这里
< / div> 
  
其中作为活动是我的css类的名称。
 
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.
解决方案
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.

                        
这篇关于Angular js：如何使用ngMousedown ngMouseup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！