how to handle scope in angular js

Question

I am working with angular js for my dashboard. I have an over all minimize button to minimize all widget and then each widget have own minimize button. I done with following script its not working. when i click widget minimize button its minimize all widget. but i want minimize that widget only.

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 code like follow:

<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>

when i click inside minimize toggleonce its minimize all widgets. — udhaya
– udhaya, Commented Jan 9, 2015 at 11:19
The only way to achieve what you are wanting would be to create a directive for this functionality, or use a different variable for each link tag. This has nothing to do with $scope, it has everything to do with the fact that you have less variables than you have items you want to track. — Claies
– Claies, Commented Jan 9, 2015 at 11:31
If by widget you mean the repeating div at the end of the html sample, it's not currently structured as a widget. I would suggest refactoring this into a directive. — Claies
– Claies, Commented Jan 9, 2015 at 11:38
yes i meaned that only. widgets are randomly generated one. how i handle to write every directives. Is it Possible? — udhaya
– udhaya, Commented Jan 9, 2015 at 11:40

erandac · Accepted Answer · 2015-01-14 08:09:29Z

1

I would rather create a directive with isolated scope for represent a inner widget. for instance;

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

          }

});

Then In 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>

Note that I haven't run and check the example. I hope you got the idea.

Edited: The ng-repeat will loop the array (list) and initiate each element to 'item' variable. You can pass that data to your directive. Check the updated code.

edited Jan 14, 2015 at 8:09

answered Jan 9, 2015 at 11:39

erandac

5755 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

udhaya Over a year ago

It wont possible for my app. Because every widget load with some content. I have to dynamically hide and show content when click minimize for particular widget/Minimize all widget at a time

erandac Over a year ago

You could bind the data from outer scope, so each widget will get it own data. Then inside the widget you could use that data as you want. I have edited the answer to reflect that

Collectives™ on Stack Overflow

how to handle scope in angular js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related