Question

这里我试图在角度js中实现应用程序。我为所有子元素设置了最小化/最大化按钮，并为子元素内部设置了最小化/最大化按钮。但是，当我点击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（因为两个'最小化面板'都在控制器的范围内。因此，任何ng -hide for isHidden将被隐藏，从而导致全局'最小化'。您有两种选择：

1）为每个Minimize面板使用单独的变量，并在单击相应的函数时切换该变量的值。还要为自己的变量编写Panel级别'ng-hide'。

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

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

您可以观看this视频以获取更多输入。

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

1 个答案: