Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 获取ngClick指令中的元素_Javascript_Angularjs_Angularjs Directive - Fatal编程技术网

Javascript 获取ngClick指令中的元素

Javascript 获取ngClick指令中的元素,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,是否可以在ngClick指令中获取当前元素对象。例如: <div data-ng-click=" $element.hide() "> ... </div> 其中$element是div元素的jquery包装器。我知道我可以为此编写自己的指令,但我不想为每一项琐碎的任务都这样做。也许有人有主意 您可以在控制器中更好地执行此操作: function HomeCtrl($scope, $element) { $scope.hideElement = function()

是否可以在ngClick指令中获取当前元素对象。例如:

<div data-ng-click=" $element.hide() "> ... </div>
其中$element是div元素的jquery包装器。我知道我可以为此编写自己的指令,但我不想为每一项琐碎的任务都这样做。也许有人有主意

您可以在控制器中更好地执行此操作:

function HomeCtrl($scope, $element) {
  $scope.hideElement = function() {
    $($element).hide();
  }
}
HTML:


在ng click中,您还始终拥有通过$event提供的本机事件

所以你可以这样做:

$scope.hideElement = function($event) {
    $($event.target || $event.srcElement).hide();
}
并在模板中使用它,如:

<div data-ng-click="hideElement($event)">Hide me</div>
演示:

使用ng隐藏

<div data-ng-hide="hideIt" data-ng-click="hideIt = true">Hide Me</div>
或者您可以创建一个指令,该指令也包含动画

使用ng show或ng hide。您设置的模型属性可以根据元素的真实性自动显示/隐藏元素。@Crowcoder hide方法仅用于示例目的。实际上,我有一个更复杂的任务。不确定您是否可以,因为angular不允许在表达式中引用dom节点,例如try ng click=$event.target.css'color','red'。看@GruffBunny不知怎么的,这部分文档从我这里溜走了。谢谢你的指点!遗憾的是angular不允许在表达式中操纵dom元素。dom操纵iside控制器被认为是不好的做法,我完全同意这一点。当然,在html中使用javascript代码也很糟糕。但很多时候,它非常方便,而且是一种有角度的方式。顺便说一下:您不能在控制器中使用$element来获取元素。在angular中没有这样的提供程序。您可以通过元素的id获取元素:“var$element=$element id”。但我不想用元素ID弄脏HTML代码,因为OP不想为此创建指令,所以我建议使用此解决方案@顺便问一下,你有没有机会查看jsbin演示?它工作得很好,它工作得很好@对不起,我错了。把你的答案加起来,但不要标为“已接受”。也许有人会提出其他建议。太好了。如果没有更好的答案,请稍后接受;在我写给@Crowcoder的时候,我只使用hide方法作为例子。事实上,我的任务要复杂得多。实际上,最好的答案来自评论中的@grufbunny。我不知道angular不允许在表达式中引用dom节点。太可惜了!看起来唯一的解决方案是在控制器中定义您自己的方法或者编写您自己的directve,当然,但在我的情况下是不合适的。所以,把你的回答标记为已接受。
<div data-ng-hide="hideIt" data-ng-click="hideIt = true">Hide Me</div>