CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
udhaya
udhaya

Reputation: 79

how to handle scope in angular js

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>

Upvotes: 0

Views: 340

Answers (1)

erandac
erandac

Reputation: 575

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.

Upvotes: 1

Related Questions