角JS ngShow和ngHide [英] Angular JS ngShow and ngHide

问题描述

我不明白，为什么ngShow和ngHide指令不工作。这是问题的一个简化的版本。

I can't figure out why the ngShow and ngHide directives aren't working. Here is a simplified version of the problem.

<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>

在控制器

$scope.showContent = false;

$scope.myFunction = function() {
    $scope.showContent = true;
}

在CONTACTINFODIV从不显示，当我点击callFunction分区。

The "contactInfo" div never shows when I click the "callFunction" div.

推荐答案

您的问题是在JavaScript世界著名的点。这个想法是，在JavaScript中，本土价值是按值传递，而对象也通过引用传递。试着改变你的看法这样：

Your problem is known in the javascript world as "the dot." The idea is that in javascript, native values are passed by value whereas object values are passed by reference. Try changing your view to this:

<div id="callFunction" ng-click="myFunction()">...</div>
<div id="contactInfo" ng-show="content.Show">...</div>

和改变你的控制器：

$scope.content.Show = false;

$scope.myFunction = function() {
    $scope.content.Show = true;
}

这会工作的原因是因为你现在各地传递对象和操纵的对象，而不是仅仅操纵值。从本质上讲，把它作为一个子范围的问题，在您的格的视野下产卵自己的范围，所以你引用变量是本机类型，它经过的价值。因此，功能更新父值，但不是孩子的价值。

The reason this would work is because you're now passing an object around and manipulating an object instead of just manipulating a value. Essentially, think of it as a "sub-scope" problem, where your "div" is spawning its own scope under the view so that variable you're referencing is a native type, it passes by value. Therefore the function updates the parent value but not the child value.

有关详细信息： http://jimhoskins.com/十二分之二千零十二/ 14 /嵌套范围 - 在angularjs.html

这篇关于角JS ngShow和ngHide的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！