angular js - ng-hide/ng-show API 无法正常工作

Question

这里我尝试在 angular js 中实现应用程序。我有一个用于所有子元素的 minimize/maximize 按钮，并将 minimize/maximize 按钮分隔到子元素内部。但是当我点击 toggle 最小化它最小化所有子元素时。问题是当我单击 toggleonce 时，它也会最小化所有子元素。

var dashboard = angular.module("dashboard",['ui.bootstrap']);
dashboard.controller('dash-control', ['$scope', function($scope) {
    $scope.isHidden = false;
    $scope.toggle = function(){
        $scope.isHidden = !$scope.isHidden;
    };
    $scope.toggleonce= function()
    {   
       if( this.isHidden === true)
           this.isHidden = false;
       else
           this.isHidden = true;
    };
}]);

查看：

<div class="contentpanel" ng-app="dashboard" ng-controller="dash-control as ctrl">
 <button class="btn btn-white" type="button" ng-click="toggle()">
 <i class="fa fa-minus-square"></i>
 </button>

<div>
<a href="" class="tooltips" ng-click="toggleonce()" title="Minimize Panel">
<i class="fa fa-minus"></i>
</a>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 1</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>

<div>
<a href="" class="tooltips" ng-click="toggleonce()" title="Minimize Panel">
<i class="fa fa-minus"></i>
</a>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 2</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
......
.....
.....
</div>

Answer 1

变量 $scope.isHidden 是一个控制器级变量，通过单击 toggleonce() 您可以在整个页面中将变量更改为 true（因为 'minimize panels' 都在控制器。因此，isHidden 的任何 ng-hide 都将被隐藏，从而导致全局 'minimise'。您有两个选择：

1) 为每个最小化面板使用单独的变量，并在您单击相应的函数时切换该变量的值。还为其自己的变量编写面板级别的“ng-hide”。

2) 为所有 Minizable 面板编写一个独立的范围指令。并将其范围与控制器隔离。现在在指令中编写一个 toggleonce 函数，它在指令范围内更改 Hidden 变量的值。编写指令时必须使用以下语法：

 .directive('minimizePanel', function() {
  return {
    scope: true,
  };

您可以观看 this 视频以了解更多信息。

angular js - ng-hide/ng-show API 无法正常工作

angular js - ng-hide/ng-show API not working properly

angularjs

angularjs-scope