Question

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

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将循环数组（列表）并将每个元素启动到＆＃39; item＆＃39;变量。您可以将该数据传递给您的指令。检查更新的代码。

如何处理角度js中的范围

1 个答案: