javascript - Angular JS ngShow 和 ngHide

Question

我不明白为什么 ngShow 和 ngHide 指令不起作用。这是问题的简化版本。

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

在 Controller 中

$scope.showContent = false;

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

当我单击“callFunction”div 时，“contactInfo”div 从未显示。

Answer 1

您的问题在 JavaScript 世界中被称为“点”。这个想法是，在 javascript 中， native 值按值传递，而对象值按引用传递。尝试将您的 View 更改为:

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

并将您的 Controller 更改为:

$scope.content.Show = false;

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

之所以可行，是因为您现在正在传递一个对象并操纵一个对象，而不是仅仅操纵一个值。本质上，将其视为“子范围”问题，您的“div”在 View 下生成自己的范围，以便您引用的变量是 native 类型，它按值传递。因此该函数更新父值而不是子值。

更多信息:http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html