Css 如果其中任何一个在不同的HTML中发生了更改，如何更改切换和按钮

我正在使用侧菜单模板

我在左侧菜单中切换（真=在线，假=离线）， 而按钮（true=online，false=offline）在另一个html中

我想做的是，如果用户打开切换“leftMenu.html”，它将为true，那么“page1.html”中的按钮也将变为true

这是我的左菜单切换代码（leftMenu.html）

已经实现了ng绑定，但在其他HTML中不起作用。它只在相同的HTML中工作

---

这是我的代码笔

根据您的场景使用$rootScope而不是$scope变量，问题将得到解决

只要将您的控制器更改为以下，问题就会得到解决，我已经在您的代码笔中检查了相同的问题

.controller('toggleCtrl', function($scope,$rootScope) {
    $rootScope.toggleColor = true;
    $scope.one = function(){
        $rootScope.toggleColor = !$rootScope.toggleColor;
    }
});

---

希望问题得到解决。

用于

page1.html

的控制器是什么？我使用了在page1.html和leftMenu中使用的同一个控制器“toggleCtrl”。html

page1.html

和

leftMenu.html

具有不同的作用域。你能创建一个小提琴吗？这是我的codePen耶。。。非常感谢你。。不知道$rootScope还可以查看模型的更改。

<button class="btn btn-default"  ng-click="one()" ng-class="{'on': toggleColor, 'of': !toggleColor}">on</button>

<button class="btn btn-default" ng-click="one()" ng-class="{'on': !toggleColor, 'of': toggleColor}" >off</button>

  .controller('toggleCtrl', function($scope) {
    $scope.toggleColor = true;

    $scope.one = function(){
      $scope.toggleColor = !$scope.toggleColor;
    }
 }) 

.controller('toggleCtrl', function($scope,$rootScope) {
    $rootScope.toggleColor = true;
    $scope.one = function(){
        $rootScope.toggleColor = !$rootScope.toggleColor;
    }
});