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