Как синхронизировать кнопки на двух разных страницах?

Question

Как нажать одну и ту же кнопку на двух разных страницах? У меня на страницах А и В одинаковые кнопки «Вкл» и «Выкл» (они делают одно и то же на двух страницах). И когда я нажимаю «Вкл», кнопка «Вкл» отключается, если я нажимаю «Выкл», кнопка выключения отключается, а кнопка «Вкл» включается.

Я ищу синхронизацию кнопок между страницами 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 , чтобы сохранить статус кнопок.

Как видите, у вас есть множество опций для сохранения статуса кнопок. логика такова:

• сохранить статус перед выходом
• получить статус после навигации по
• установить кнопки в соответствии с анализируемым статусом