Question

如何在两个不同的页面上按下相同的按钮？我在A和B页上有相同的按钮“ On”和“ Off”（它们在两页上执行相同的操作）。当我按下“开”时，“开”按钮被禁用，如果我按下“关”，则关闭按钮被禁用，“开”按钮被启用。

我正在寻找页面A和B之间的按钮同步。例如：当我在A页上按“ On”时，我希望B页上的“ On”按钮已启用。

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

您无法控制尚未加载到DOM的页面，除非该页面已由服务器处理并在服务器端进行了更改-但请暂时保留该页面。

为了与您的导航保持一致，请在装入页面并根据页面提示时，append，query string parameters parse them localStorage导航到页面之外，然后再使用URL中的按钮的当前状态在这些值上设置按钮状态。

例如，添加这些参数（或您认为合适的任何其他格式）

&onButton=0&offButton=1

您也可以使用https://www.howtosolutions.net/2017/08/fixing-mysql-10061-error-after-migration-of-database-files/来保持按钮的状态。

如您所见，您有许多选项可以保存按钮状态。逻辑是：

在退出之前保存状态
导航后获取状态
根据解析状态设置按钮

Answer 2

您可以使用服务在AngularJS中的控制器之间共享数据。之所以可行，是因为在AngularJS中服务是单例的-创建服务的实例后，该服务的实例将在访问它的任何地方共享。这是一个非常简单的示例来说明这一点。选中与一个控制器相对应的视图区域中的框，将在与另一控制器相对应的视图区域中对其进行更新。

ALTER TABLE table_name
DROP CONSTRAINT constraint_name;

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;
  })

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

2 个答案: