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

Question

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

我正在寻找页面 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 中的控制器之间共享数据。这是有效的，因为在 AngularJS 中，服务是单例的 - 一旦您创建了服务的实例，它就会在访问它的任何地方共享。这是一个非常简单的例子来演示这一点。选中与一个控制器对应的视图区域中的框将在与另一个控制器对应的视图区域中更新它。

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>

Answer 2

您无法控制尚未加载到 DOM 的页面，除非它由服务器处理并在服务器端更改它 - 但现在保留它。

为了与导航保持一致，请在通过查询字符串参数导航出页面之前，在 URL 中附加按钮的当前状态，在加载页面时分析它们，并根据值设置按钮状态。

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

&onButton=0&offButton=1

您还可以使用 localStorage 来保持按钮的状态。

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

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