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

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>

根据angularJS中的范围变量更改按钮文本

2 个答案: