如何在角度js中处理范围

Question

我正在为我的仪表板使用角度js。我有一个最小化按钮来最小化所有部件，然后每个部件都有自己的最小化按钮。我完成了下面的脚本它不工作。 当我点击小部件最小化按钮它最小化所有部件。但我只想最小化该小部件。

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

HTML代码类似如下：

<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

我宁愿创建一个具有隔离范围指令表示内部部件。例如;

dashboard.directive('myWidget',function(){ 

    return { 
     scope:{}, 
     template:"<div>\r\n<a href=\"\" class=\"tooltips\" ng-click=\"toggleonce()\" title=\"Minimize Panel\"><i class=\"fa fa-minus\"><\/i><\/a>\r\n<div class=\"row tinychart\" ng-show=\"isHidden\">asdasdasd<\/div>\r\n<div class=\"row tinychart\" ng-hide=\"isHidden\">sdasdasd<\/div>\r\n\r\n <\/div>", 
     link:function($scope) 
     { 
       $scope.isHidden = false; 
       $scope.toggle = function(){ 
       $scope.isHidden = !$scope.isHidden; 
       }; 

      $scope.togglesingle = function() 
      { 
       if(this.isHidden === true) 
       this.isHidden = false; 
       else 
       this.isHidden = true; 
       }; 
      } 

      } 

}); 

然后在Html Body;

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

<div my-widget></div> 
<div my-widget></div> 
</div> 

请注意，我没有运行并检查示例。我希望你明白了。

编辑： ng-repeat会循环数组（列表）并将每个元素初始化为'item'变量。您可以将该数据传递给您的指令。检查更新的代码。