Question

我无法弄清楚为什么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永远不显示。

Answer 1

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

Answer 2

你的问题在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”在视图下产生自己的范围，以便您引用的变量是本机类型，它按值传递。因此，该函数更新父值，但不更新子值。

有关详细信息：http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

Answer 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链接的代码。

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

Angular JS ngShow和ngHide

4 个答案: