ng-show，ng-hide 在控制器外不起作用答案

【问题标题】：ng-show, ng-hide not working outside the controllerng-show，ng-hide 在控制器外不起作用
【发布时间】：2018-12-21 14:28:00
【问题描述】：

我有两个 div。一个是add，另一个是view。一次显示任何一个 div。我的添加按钮被放置在控制器之外。

     <input id="Button1" type="button" value="Add" onclick="AddClick()" />
 <div ng-app="myApp" ng-controller="csrControl" ng-init="viewdiv=true">
     <div id="view" ng-show="viewdiv">
         view
     </div>
     <div id="add" ng-hide="viewdiv">
        Add
     </div>
 </div>

在这里，我从外部调用了控制器并将范围变量分配给 false。变量设置为false，但div不能隐藏和显示。 ng-show 和 ng-hide 不起作用

function AddClick() {
       var $scope = 'div[ng-controller="csrControl"]';
       $scope.viewdiv = 'false';
       $scope.$apply();
    }

【问题讨论】：

当您单击按钮时 - 您是否达到了功能？在那里设置一个断点
{{viewdiv}} 它在按钮单击时显示为 false。但显示和隐藏不起作用
在 JavaScript 中，字符串 'false' 是 truthy。
感谢@georgeawg，我已将值设置为字符串。没有那么真实。我已将 false 设置为真实，它将完美地工作。

标签： javascript angularjs

【解决方案1】：

以下是我为使其正常工作而进行的更改：

将ng-app="myApp" ng-controller="csrControl"放入体内。
将ng-init="viewdiv=true" 移至$scope.viewdiv = true;。

还有很多小事。看看吧。

angular.module('myApp', ['myApp.controllers']);

angular.module('myApp.controllers', []).controller('csrControl', [
  '$scope', function($scope){
    $scope.viewdiv = true;
    $scope.addClick = function() {
       $scope.viewdiv = false;
    }
  }
]);

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="csrControl">
<input id="Button1" type="button" value="Add" ng-click="addClick()" />
 <div>
     <div id="view" ng-show="viewdiv">
         view
     </div>
     <div id="add" ng-hide="viewdiv">
        Add
     </div>
 </div>
</body>
</html>

【讨论】：

我的添加按钮在控制器之外。
@Prakasam 您需要了解更多关于 angularjs 的工作原理以及如何利用它的信息。