Angularjs：如何在 Mousedown ng Mouseup 上使用答案

【问题标题】：Angular js: how to use ngMousedown ngMouseupAngularjs：如何在 Mousedown ng Mouseup 上使用
【发布时间】：2014-02-05 04:01:51
【问题描述】：

是否可以使用 ngMousedown 将类添加到 div 并使用 ngMouseup 再次删除类？目前我使用 ng-mousedown="activateClass()" ，在 activateClass() 更改 $scope.className="data-active" 并再次更改它与其他与 ng-mouseup 一起使用。并使用 ng-class 添加类“data-active” 我不想使用 $scope.className 并用控制器中的函数更改它，因为这个函数用于多个 div，我不想将类添加到我拥有的所有 div 中。

谢谢。

【问题讨论】：

标签： javascript class angularjs

【解决方案1】：

如果你不想使用控制器，你可以在视图中写 ng-mousedown="className='data-active'"

【讨论】：

【解决方案2】：

你是不是这个意思：

<div ng-mousedown="upordown='down'" 
     ng-mouseup="upordown=''" 
     ng-class="upordown">content</div>

【讨论】：

【解决方案3】：

你可以使用 ng-events 和 ng-class 来实现它：

<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
</head>
<body>
<input type="button" value="click me" ng-mousedown="className='data-active'" ng-mouseup="className=''">
<br>
<span class="base-class" ng-class="className">Sample Text</span>
</body>
</html>

【讨论】：

【解决方案4】：

通常控制器不应该关心你的 DOM。您在那里尝试做的事情似乎更适合指令。我会执行一个指令：

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

并在这样的 div 上使用它

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

其中 active 是我的 css 类的名称。

【讨论】：