根據angularJS中的范圍變量更改按鈕文本

Question

我的頁面上有一個按鈕，其文本（OFF / ON）將根據控制器中的變量而變化。 默認情況下，變量值為false，因此文本將為ON。 當用戶單擊此按鈕時，變量值將為true，文本將為OFF。

通過另一個按鈕打開一個彈出窗口，我有這個相同的按鈕。 該窗口將使用相同的控制器。

問題是，如果我通過單擊更改按鈕文本，則該文本應反映在彈出窗口中。 彈出窗口中的更改應反映在主頁上。

.controller('myController', ['$scope', 'myService',
 function ($scope, myService) {
   $scope.btnText = myService.getTextState();
 };

$scope.toggleText = function(){
            $scope.btnText = myService.toggleText($scope.toggleText);;  
        };

 $scope.getTitle = function() {
            if($scope.btnText){
                return "OFF";
            }
            else{
                return  "ON";
            }
        };
]);



.service('plotPanelService',  function () {
 var btnText = false;

  toggleText: function (param) {
                btnText = !param;
                return (!param);
            },
  setTextState: function (paramText) {
                btnText = paramText;
            },

            getTextState: function () {
                return btnText;
            }
}

Answer 1

{{myVar ===“ true”？ “這是真的” ： ””}}

Answer 2

如果要在兩個不同的控制器之間共享模型，則應創建服務或工廠。

您說的是，您多次使用同一控制器。 控制器不是單例。 它將被創建多次。 但是工廠或服務是單例的。 因此，您可以在兩個控制器之間共享同一對象。

另一個解決方案是為模型創建包裝器。 如果在父控制器中創建包裝對象，則可以直接在子控制器中訪問該包裝對象。 Angular提供程序原型繼承。 因此，您的子控制器中將具有相同的對象。

在plnkr之后結帳

var app = angular.module('plunker', ['uiSwitch']);

app.controller('controller', function($scope, myservice) {
  $scope.model = myservice.model;

});

app.service('myservice', function () {

  this.model = {
    enabled: false
  }
}); 

HTML：

  <div  ng-controller="controller">
    <p>Controller 2</p>
    <switch id="enabled" name="enabled" ng-model="model.enabled" class="green"></switch>
  <br>{{ model.enabled }}
    </div>
    <div  ng-controller="controller">
    <p>Controller 2</p>
    <switch id="enabled" name="enabled" ng-model="model.enabled" class="green"></switch>
  <br>{{ model.enabled }}
    </div>