CODEWITHSUNDEEP
angularjsangularjs-rootscope
Akshara
Akshara

Reputation: 137

Disable button in one controller from another

Consider I have two controllers Ctrl1 and Ctrl2. On clicking a button in Ctrl1, the button in Ctrl2 should be disabled.

Any sample code for this??

Upvotes: 1

Views: 1019

Answers (3)

user8317956
user8317956

Reputation:

Without $rootScope : 

var myApp = angular.module('myApp', []);

function Controller2($scope, ButtonService) {
  $scope.object = ButtonService.getValue();
};

function Controller1($scope, ButtonService) {

  $scope.changeValue = function() {
    ButtonService.getValue(true);
  };

};

myApp.factory('ButtonService', function() {
  var obj = {}
  return {

    getValue: function(update) {
      var defaultValue = false;

      if (typeof(update) === 'undefined') {
        obj.val = defaultValue;
      } else {
        obj.val = update;
      }
      return obj;
    }
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">

  <div ng-controller="Controller1">
    <button ng-click="changeValue()">Click to change Value</button>
  </div>

  <div ng-controller="Controller2">
    <button ng-disabled="object.val">{{!object.val ? 'Enabled Button' : 'Disabled Button'}}</button>
  </div>

</body>

With $rootScope :

var myApp = angular.module('myApp', []);

myApp.service('myService', function($rootScope) {
  var self = this,
    disabledButton = false;

  this.setDisabledButton = function() {
    // Change here if you want to toggle on click
    if (!disabledButton) {
      disabledButton = true;
      $rootScope.$broadcast("btnDisabled", disabledButton);
    } else {
      return;
    }

  }

  this.getDisabledButton = function() {
    return disabledButton;
  }
});

myApp.controller('Ctrl1', function($scope, myService) {
  $scope.disabledControllerButton = function() {
    myService.setDisabledButton();
  }
});

myApp.controller('Ctrl2', function($scope, myService) {
  $scope.$on('btnDisabled', function(event, param) {
    $scope.Ctrl1ButtonClicked = param;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="Ctrl1">
    <button ng-click="disabledControllerButton()">
    Click to Change
  </button>
  </div>

  <div class="container" id="main" ng-controller="Ctrl2">
    <button ng-disabled="Ctrl1ButtonClicked">
    {{Ctrl1ButtonClicked ? 'Disabled ' : 'Enabled '}} Button
  </button>
  </div>
</body>

Kindly check this snippet. It might help you out.

Upvotes: 1

Rakesh Shravz
Rakesh Shravz

Reputation: 61

You can do that by the following implementation.

1.Module.service() 
2.Module.factory() 
3.Module.provider()
4.Module.value()
5.using $parent in HTML code
6.using $parent in child controller
7.using controller inheritance
8.Holding the shared data in the root scope
9.Using $emit,$broadcast

Upvotes: 1

OB Kenobi
OB Kenobi

Reputation: 305

You have 3 options:

  1. Angular events: use a the $broadcast or $emit from the relevant controller(Ctrl1) to notify the brother controller (Ctrl2), at the reciveing controller use $on to listen the event see Angular Events.
  2. Second option: Use a parent scope for both controller and save the state of the button on it - Lets say you have CtrlP has the parent you set on the $scope of CtrlP the property $scope.isButton2Disabled to be false. then on the child controller Ctrl1 on the click handler you add the following line $scope.$parent.isButton2Disabled = true; on the view of Ctrl2 you add ng-disabled="isButton2Disabled" See Fiddle
  3. Last one and IMO the worst way, just use $rootScope and set $rootScope.isButton2Disabled = false; when you're init the app, then when clicking on the button in Ctrl1 add the following code in the click handler: $rootScope.isButton2Disabled = true; all you need now is to do the same on #2 add ng-disabled="isButton2Disabled" to the button you want to disable.

For further reading: Sharing data with angular

Upvotes: 1

Related Questions