如果切换和按钮中的任何一个在不同的地方发生了变化，如何使切换和按钮发生变化 HTML

Question

我正在使用侧边菜单模板。

我在左侧菜单中有切换（true=在线，false=离线），而另一个 html.

中的按钮（true=在线，false=离线）

我想做的是，如果用户打开开关 'leftMenu.html'，它将为 true，然后 'page1.html' 中的按钮也变为 true。

这是我在左侧菜单中进行切换的代码 (leftMenu.html)

<span ng-controller="toggleCtrl">
   <p ng-bind=toggleColor></p> 
     <ion-toggle  ng-checked=toggleColor ng-click="one()" toggle-class="toggle-calm">
        Airplane Mode 
     </ion-toggle>
</span>

这是我在另一个按钮中的代码。html (page1.html)

<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>

这是我的 js (app.js)。两者 HTML 使用相同的控制器 'toggleCtrl'

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

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

已经实现了 ng-bind，但它在其他 HTML 中不起作用。它只在同一个 HTML 中有效。

这是我的codePenhttp://codepen.io/aishahismail/pen/pgPEoJ

Answer 1

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

只需将您的控制器更改为以下内容即可解决问题我已经在您的代码笔中检查过相同的内容。

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

希望问题得到解决。

如果切换和按钮中的任何一个在不同的地方发生了变化，如何使切换和按钮发生变化 HTML

How to make the toggle and the button change if any one of it had changes in different HTML

css

angularjs

ionic-framework

toggle

ng-class