单击隐藏父元素

Hide parent element on click

本文关键字：元素 隐藏 单击      更新时间：2023-09-26

学习Angular JS，尝试一个简单的函数，点击一个元素会隐藏它的父元素。

我的代码: 
<div class="form-section" ng-init="visible = true" ng-show="visible">   
     <a class="next" ng-click="$parent.visible = false">NEXT</a>
</div>

然而，当我点击我的<a>标签时，什么也没有发生。

我基于以下代码:http://jsfiddle.net/oxda3aes/

你不需要$parent

你正在做的是在作用域上创建一个名为visible的变量并将其设置为true。你所需要做的就是改变这个变量，调用visible$parent没有引用父节点，它引用了父作用域。

<div class="form-section" ng-init="visible = true" ng-show="visible">   
    <a class="next" ng-click="visible = false">NEXT</a>
</div>
http://jsfiddle.net/oxda3aes/25/

这可能会帮助你更好地看到发生了什么:http://jsfiddle.net/oxda3aes/26/

我在这里声明了控制器中的可见变量。两者完成相同的任务。

这里我有一个作用域上的函数，在点击时被调用，做同样的事情:http://jsfiddle.net/oxda3aes/27/

$parent在angular中并不表示HTML结构中的父元素，而是嵌套的作用域关系。在您提到的示例中，ng-repeat为它的每次迭代创建子作用域，在本例中，从子作用域的$parent指向它的父作用域。在您的情况下，两个HTML元素属于相同的作用域，因此，正如已经回答的那样，在您的情况下不要使用$parent。

在angular中处理父/子作用域交互时，总是要为你的ng-models使用对象，而不是原语(ngModel="obj ")。property"而不是ngModel="property")，请参阅关于angular作用域的非常好的文章https://github.com/angular/angular.js/wiki/Understanding-Scopes

相关文章：