Question

学习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/

Answer 1

您不需要$parent

您正在做的是在名为visible的范围上创建变量并将其设置为true。所以你需要做的就是调用变量visible $parent isn't referencing a parent node, it's referencing a parent scope

<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/

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

这里我有一个关于在click上调用的作用域的函数，它执行相同的操作： http://jsfiddle.net/oxda3aes/27/

Answer 2

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

在角度处理父子范围交互时，总是使用对象作为ng模型，而不是基元（ ngModel =＆＃34; obj.property＆＃34; 而不是只需 ngModel =＆＃34;属性＆＃34; ），请参阅有关角https://github.com/angular/angular.js/wiki/Understanding-Scopes

范围的非常好的文章

单击时隐藏父元素

2 个答案: