Angular JS ngShow 和 ngHide答案

【问题标题】：Angular JS ngShow and ngHideAngular JS ngShow 和 ngHide
【发布时间】：2015-01-28 15:01:29
【问题描述】：

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

<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;
}

当我点击“callFunction”div 时，“contactInfo”div 永远不会显示。

【问题讨论】：

您可以忘记控制器并在您的 html 中完成所有操作：ng-click='myvar = !myvar'。这可能也是解决方案，因为您的范围/控制器未加载？
上面的代码没有问题，一定是其他原因导致了问题。检查浏览器控制台是否有错误，还要在函数上放置一个断点，并确保在单击 div 时它被命中
你能在 fiddle plunker 等上重新产生错误吗？

标签： javascript angularjs

【解决方案1】：

您的问题在 javascript 世界中被称为“点”。这个想法是，在 javascript 中，本机值是按值传递的，而对象值是通过引用传递的。尝试将您的视图更改为：

<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;
}

这会起作用的原因是因为您现在正在传递一个对象并操纵一个对象，而不是仅仅操纵一个值。本质上，将其视为“子范围”问题，您的“div”在视图下产生自己的范围，以便您引用的变量是本机类型，它通过值传递。因此该函数更新父值而不是子值。

【讨论】：

确实是这个问题。

【解决方案2】：

http://jsfiddle.net/aesmzz6q

HTML：

<div ng-controller="theCtrl">

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

JavaScript：

angular.module('appName', [])
      .controller('theCtrl', ['$scope', function ($scope) {
        $scope.showContent = false;

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

    angular.element(document).ready(function() {
      angular.bootstrap(document, ['appName']);
    });

你所拥有的似乎没有任何问题。这是一个工作示例的链接。aesmzz6q

【讨论】：

【解决方案3】：

This works for me。我认为您的问题可能出在其他地方。

HTML：

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

JavaScript：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.showContent = false;

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

我必须包含代码以允许 JSFiddle 链接。

【讨论】：

【解决方案4】：

这很好用：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
    <script src="app.js"></script>
  </head>

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

</html>

我添加了一个小提琴：http://plnkr.co/edit/S06ufeHI2j5lKs5LxbRT?p=preview

我还修复了你的小提琴有很多错误http://jsfiddle.net/97nkv1v1/4/

【讨论】：

你没有选择左边的角度库，我已经更新了它，它可以工作jsfiddle.net/z6dd3z2b/1