javascript - 如何同步两个不同页面上的按钮？

Question

如何在两个不同的页面上按下相同的按钮？我在我的页面 A 和 B 上有相同的按钮“打开”和“关闭”(它们在两个页面上做同样的事情)。当我按下“On”时，“On”按钮被禁用，如果我按下“Off”，关闭按钮被禁用，“On”按钮被启用。

我正在为我的页面 A 和 B 之间的按钮寻找同步。例如:当我在页面 A 上按下“打开”时，我希望页面 B 上的“打开”按钮已经启用。

A 和 B 页面上的相同按钮:

<button id="onButton" class="mdl-button mdl-js-button" ng-model="peer.enable" ng-click="vm.enable()"  onclick="this.disabled=true">on</button>
<button id="offButton" class="mdl-button mdl-js-button" ng-model="peer.disable" ng-click="vm.disable()" onclick="this.disabled=true">off</button>

看起来很容易，但我不知道从哪里开始，

谢谢你的帮助

Answer 1

您可以使用服务在 AngularJS 中的 Controller 之间共享数据。这是有效的，因为在 AngularJS 中服务是单例的——一旦你创建了一个服务实例，它就会在任何被访问的地方共享。这是一个非常简单的例子来证明这一点。在与一个 Controller 对应的 View 区域中选中一个框，将在与另一个 Controller 对应的 View 区域中更新它。

angular.module('app', [])
  .service('sharedDataService', function() {
    var service = {
      checkboxData: {
        checkbox1: false,
        checkbox2: false
      }
    }
    
    return service;
  })
  .controller('ctrl_1', ($scope, sharedDataService) => {
    $scope.checkboxData = sharedDataService.checkboxData;
  })
  .controller('ctrl_2', ($scope, sharedDataService) => {
    $scope.checkboxData = sharedDataService.checkboxData;
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl_1">
    <h3>Controller 1</h3>
    <div>
      <label>Checkbox 1
  <input type="checkbox" ng-model="checkboxData.checkbox1" />
  </label>
      <br/>
      <label>Checkbox 2
  <input type="checkbox" ng-model="checkboxData.checkbox2" />
  </label>
    </div>
  </div>
  <div ng-controller="ctrl_2">
    <h3>Controller 2</h3>
    <div>
      <label>Checkbox 1
  <input type="checkbox" ng-model="checkboxData.checkbox1" />
  </label>
      <br/>
      <label>Checkbox 2
  <input type="checkbox" ng-model="checkboxData.checkbox2" />
  </label></div>
  </div>