Question

我开始了解AngularJS，我在构建脚本时遇到了麻烦，这些脚本的目的是处理所有角度的逻辑，同时混合了jQuery的效果等。

所以我正在做一个简单的CRUD＆＃34; to-dos＆＃34;应用程序，当我删除任务时，我想让任务div以一种奇特的方式消失。

所以这就是调用deleteTask方法的地方：

<div class="delete-task glyphicon glyphicon-remove" ng-click="deleteTask(task)"></div>

这里定义了角度控制器：

$scope.deleteTask = function(task) {
    var index = $scope.tasks.indexOf(task);
    $scope.tasks.splice(index, 1);
};

在最后一段代码中，如何检索调用该方法的div？我想知道DOM元素，所以我可以对父div应用一些效果，并以一种漂亮的方式逐渐消失。

Answer 1

ng-click可以访问$event参数：

ng-click="deleteTask(task, $event)"

$scope.deleteTask = function(task, e) {
    var index = $scope.tasks.indexOf(task);
    $scope.tasks.splice(index, 1);

    console.log(e.target); //caller
};

正如另一个答案所说，你不应该这样做...而是应用一个CSS类来转换元素（单向）（checkout ngAnimate for在转发器上输入/退出动画很好）

Answer 2

我将首先回答这个问题，然后解释更好的方法。

您可以使用$event对象获取DOM元素对象启动事件：

<div class="delete-task glyphicon glyphicon-remove" ng-click="deleteTask(task, $event)"></div>

并且在控制器中，您可以阅读$event.target对象，这是您追求的DOM元素：

$scope.deleteTask = function(task, e) {
    // DOM element is e.target
    var index = $scope.tasks.indexOf(task);
    $scope.tasks.splice(index, 1);
};

但是，你不应该这样做。在这样的控制器中将jQuery代码与jQuery混合使用并不是一个很好的方法。您至少有两个更好的选择：

1）。使用ngAnimate模块可以获得您喜欢的任何花哨的动画效果。在这种情况下，我将使用ngIf指令并定义必要的CSS规则来转换/动画元素。

2）。构建自定义指令，您可以在其中使用任何类型的DOM操作。

获取触发ng-click的元素

2 个答案: