angularJS의 범위 변수를 기반으로 버튼 텍스트를 변경하십시오.

Question

내 페이지에 버튼이 있으며 컨트롤러의 변수에 따라 해당 텍스트 (OFF/ON)가 변경됩니다. 기본적으로 변수 값은 false이므로 텍스트가 ON이됩니다. 사용자가이 버튼을 클릭하면 변수 값이 true가되고 텍스트가 꺼집니다.

다른 하나의 버튼을 통해 팝업 창이 열리고 거기에 동일한 버튼이 있습니다. 이 창은 동일한 컨트롤러를 사용합니다.

문제는, 버튼 텍스트를 클릭하여 변경하면 팝업 창에 반영되어야한다는 것입니다. 팝업 창의 변경 사항은 메인 페이지에 반영되어야합니다.

.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

두 개의 다른 컨트롤러 사이에서 모델을 공유하려면 서비스 또는 팩토리를 만들어야합니다.

같은 컨트롤러를 여러 번 사용하고 있습니다. 컨트롤러는 싱글 톤이 아닙니다. 그것은 여러 번 만들어 질 것입니다. 그러나 공장이나 서비스는 싱글 톤입니다. 따라서 두 컨트롤러간에 동일한 객체를 공유 할 수 있습니다.

다른 해결책은 모델의 래퍼 작성입니다. 상위 컨트롤러에서 래퍼 개체를 만들면 하위 컨트롤러에서 직접 래퍼 개체에 액세스 할 수 있습니다. 각도 제공자는 상속을 프로토 타입합니다. 그래서 당신은 당신의 자식 컨트롤러에서 같은 객체를 갖게 될 것입니다.

체크 아웃 다음 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>