javascript - 触发事件和 DOM 操作，如 jQuery in angular

Question

jQuery

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

$('.box').bind('mousedown', function(){
    alert('box class clicked');
});

Angular

<div ng-app="myApp" >
    <div data-ng-controller="myCtrl">
        <div ng-click="boxClick()" class="box"></div>
        <div ng-click="boxClick()"  class="box"></div>
        <div ng-click="boxClick()"  class="box"></div>
    </div>
</div>


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.boxClick = function(){
        alert('box class clicked');
    }
});

现在我正在学习 AngularJS，如果我们看到这个，短而脆的将是 jQuery，对于一个单击事件，我们正在 AngularJS 中编写这么多行代码, 任何人都可以帮我写像 jQuery 一样短的东西，如何在 AngularJS 中选择 DOM 元素，比如 jQuery ，我正在使用 ng-click 来触发 AngularJS 中的 click 事件，没有它我可以触发 click 事件 在脚本标签本身。感谢提前回复

Answer 1

您可以使用 directive 来完成.这是 angularjs 中针对这种情况的标准方式。

样本看起来像

 var app = angular.module('myApp', []);
    app.directive('myDomDirective', function () {
        return {
            link: function ($scope, element, attrs) {
                element.bind('click', function () {
                   alert('You clicked me!');
                });
                element.bind('mouseenter', function () {
                    alert('You mouse entered me!');
                });
                element.bind('mouseleave', function () {
                     alert('You mouse leaved me!');
                });
            }
        };
    });
    app.controller('myCtrl', function($scope) {
     // do what you want like service calls and binding
   });

然后调用任意标签中的指令

<div ng-app="myApp" >
    <div data-ng-controller="myCtrl">
        <div my-dom-directive class="box"></div>
        <div my-dom-directive  class="box"></div>
        <div my-dom-directive  class="box"></div>
    </div>
</div>

请看这个document了解更多详情