서비스의 속성에 양방향으로 바인딩 된

Question

공용 변수로 일부 응용 프로그램 전반의 설정을 저장하는 settings 서비스가 있습니다. 사용자가 다양한 input을 통해 이러한 설정을 변경하도록하고 싶습니다. 따라서 서비스의 속성과 input 태그 사이에 "양방향 바인딩"을 설정하려고합니다.

.controller('SettingsCtrl', ['settings', '$scope', function (settings, $scope) { 

그때 내가 범위에 설정을 첨부 :

이

$scope.questionCount = settings.questionCount; 

은 그때가 서비스 할 때 다시 범위 사본을 쓰기

내 현재의 접근 방식은 컨트롤러에 서비스를 주입하는 것입니다 그들은 변경 :

<input ng-model="questionCount" ng-change="writeBack()"> 

,

,

$scope.writeBack = function() { 
    settings.questionCount = $scope.questionCount; 
}; 

여기 올바른 길에 있습니까? 이런 종류의 바인딩을 달성하는 가장 좋은 방법은 무엇입니까?

Answer 1

글쎄요. 완전한 양방향 바인딩을 원할 경우 모든 바인딩 가능한 속성을 포함하는 서비스 모델을 사용할 수 있습니다. ,

$scope.settingsModel = settings.model; 

그런 다음, HTML에 :

this.model = { 
    questionCount: 0 
} 

그리고 컨트롤러의 정의에이 settings.model$scope받는 첨부 :

는 예를 들어, settings 서비스에이 같은 model 속성을 정의 다음과 같이 사용하십시오 :

<input ng-model="settingsModel.questionCount"> 

ng-change 지시어에 의존 할 필요가 없으므로 데이터는 settings 서비스 model 개체로 직접 업데이트됩니다.

단점은 데이터를 직접 바인딩하기 때문에 입력을 검사 할 때 (특히 설정을 할 때)주의해야합니다. 예를 들어 사용자가 텍스트 입력 상자를 사용하여 속성 중 하나를 수동으로 변경할 수 없도록 선택 상자에서 미리 정의 된 값 목록을 사용하지 마십시오. 이러한 예방 조치를 취하는 경우이 접근법에 문제가 없어야합니다.