CODEWITHSUNDEEP
angularjs
Pravin Agre
Pravin Agre

Reputation: 371

passing ng-show between two different controllers

I have a button which falls into Controller B and two block of HTML code which kind of falls under controller A...............and button falls into one block of HTML code

Example:

    <div ng-controller="A">
      <div ng-show="now">
       <div>
         <Button ng-controller="B"></Button>
       </div>
      </div>
      <div ng-show="later">
      </div>
   </div>

On one button click I show up now block and later on button click of B controller I kind of hide now block and display later block.

How do I achieve this functionality?? I am not able to pass ng-show varibales between two different controller files......what should I use???

Upvotes: 0

Views: 912

Answers (3)

Alhuck
Alhuck

Reputation: 1029

You can also achieve this by declaring the variable in $rootScope and watching it in controller A,

app.controller('A', function($scope, $rootScope) {
 $rootScope.now = true;
 $rootScope.later = false;

 $rootScope.$watch("now", function() {
  $scope.now = $rootScope.now;
  $scope.later = !$rootScope.now;
 })
});

In Controller B, you just change the value of now based on previous value like this on ng-click,

app.controller('B', function($scope, $rootScope) {
  $scope.testBtn = function() {
   $rootScope.now = !$rootScope.now;
  }
});

I have implemented a button within different divs(now and later) in a plunker,

http://embed.plnkr.co/xtegii1vCqTxHO7sUNBU/preview

Hope this helps!

Upvotes: 0

Michael
Michael

Reputation: 3104

Hope this helps...!

angular.module('app', [])
  .controller('A', function($scope) {
    console.log('A');
    $scope.state = {
      now: true
    };

    $scope.showLater = function() {
      $scope.state.later = true;
    };
  })
  .controller('B', function($scope) {

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="A" ng-app="app">
  <div ng-show="state.now">
    <div>
      <button ng-controller="B" ng-click="showLater()">Show Later</button>
    </div>
  </div>
  <div ng-show="state.later">LATER
  </div>
  <p> <pre ng-bind="state | json"></pre>
  </p>
</div>

Upvotes: 1

aludvigsen
aludvigsen

Reputation: 5981

You could use a simple service that stores the state.

Example:

angular.module('mymodule').service('ActiveService', function() {
    var service = {};
    var status = false;
    service.getStatus = function() {
       return status;
    }
    service.toggle = function() {
       status = !status;
    }

    return service;
})

And in your controller:

angular.module('mymodule').controller('SomeController', function(ActiveService) {
     $scope.status = ActiveService.getStatus;
})

The Angularjs service is a singelton, so it will hold your values for you across different controllers, directives or pages.

Could also be used directly:

// Controller
$scope.service = ActiveService;

// Html 
<div ng-show="service.getStatus()">
   ...
</div>

Upvotes: 0

Related Questions