从一个控制器禁用另一个控制器中的按钮

Question

假设我有两个控制器 Ctrl1 和 Ctrl2。单击 Ctrl1 中的按钮时，应禁用 Ctrl2 中的按钮。

任何示例代码？？

Answer 1

没有 $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>

使用 $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>

请检查此代码段。它可能会帮助你。

Answer 2

您有 3 个选项：

Angular事件：使用$broadcast或$emit从相关控制器（Ctrl1）通知兄弟控制器（Ctrl2），在接收控制器使用$on监听事件见 Angular Events.
第二个选项：为两个控制器使用父作用域并在其上保存按钮的状态 - 假设您有 CtrlP 具有您在 CtrlP 的 $scope 和属性上设置的父作用域$scope.isButton2Disabled 为假。然后在子控制器 Ctrl1 的单击处理程序上添加以下行 $scope.$parent.isButton2Disabled = true; 在 Ctrl2 的视图上添加 ng-disabled="isButton2Disabled" 请参阅 Fiddle
最后一个和IMO最糟糕的方法，只需使用$rootScope并在您初始化应用程序时设置$rootScope.isButton2Disabled = false;，然后在单击Ctrl1中的按钮时在单击中添加以下代码处理程序：$rootScope.isButton2Disabled = true; 您现在需要做的就是在 #2 上执行相同的操作，将 ng-disabled="isButton2Disabled" 添加到您要禁用的按钮。

进一步阅读：Sharing data with angular

Answer 3

您可以通过以下实现来做到这一点。

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

从一个控制器禁用另一个控制器中的按钮

Disable button in one controller from another

angularjs

angularjs-rootscope