AngularJS에서 컨트롤러로 모델을 확장 할 수 있습니까?

Question

저는 Angular와 MV * (Ruby on Rails를 여러 해 동안 다른 개발자들이 사용하는 것을 보면서 얻은 것의 짧은 것)에서 매우 새롭습니다. 그래서 아마 순진한 질문을 용서해주십시오.

사용자가 거리 주소를 입력하고 Google 지오 코딩 API에서 실시간 제안을 얻을 수있는 대표 입력 필드를 설정하려고합니다. 나는 UI 부트 스트랩에서이 예 (중간 필드에 "비동기 결과"예를 들어)를 그대로 시작 :

http://angular-ui.github.io/bootstrap/#/typeahead

그것은 로컬 작업,하지만 지금은 주소의 기타 관련 정보를 수집하기 위해 그것을 확장 할 다른 양식 데이터와 함께 제출하십시오. 예를 들어 Geocoding API가 결과에 address_components (example here)의 country 유형을 반환하면 해당 데이터를 서버에 POST하는 양식 데이터에 추가하고 싶습니다. 지오 코딩 API에 의해 반환에만 formatted_address 속성은 ui.bootstrap.typeahead 지침대로 양식을 제출, 현재

을 (를 어떻게/내가 캡처해야하지만이 좋은 출발점이 무엇 속성. 다른 논리가있을 것이다) typeahead 지시문의 <input>에 ng-model을 사용하여 바인딩합니다.

1. 나는 처음부터 시작한다면 (즉, UI 부트 스트랩에서 만든 설계/구현 결정에 바인딩되지 않은 :

   그래서, 내 질문은 (그러나 별도 중 하나를 해결 주시기 바랍니다) 두 가지이다), 이것을 구현하는 가장 "각도적인"방법은 무엇일까요? 지시문이 모든 값에 대해 ng-model으로 바인드 된 <input>을 생성해야합니까? 일 수도 있고 컨트롤러가 사용할 수있는 것으로 채우기를 처리 할 수 ​​있습니까?

2. 처음부터 시작하지 않으므로이 기능을 제공하기 위해 기존 코드를 보완하는 합리적인 방법은 무엇입니까? 기존 지침에 기능을 추가 할 수있는 방법이 있습니까? 이 동작은 컨트롤러에 속한 것입니까, 아니면 서비스로 추상화하는 것이 좋을까요? 아니면 내가 이것을 overthinking 오전 - 내가 생각하지 않은 간단하거나 더 나은 방법이 있습니까? UI 부트 스트랩 예제에 따르면이 코드를 넣으려는 유일한 장소는 내의 .then()에 전달 된 success 함수에 있으며 여기에서는 $http 응답을 처리하지만 이상적인 것은 아니라고합니다. 거기서 일하는 것이 상상할 수있는 것은 내가 만들고있는 양식 값 객체 (즉, 양식 제출시 POST 할 객체)에 속성을 추가하는 것입니다. 그런 다음이 속성의 이름을 알아야합니다. 이제 내 컨트롤러는 다음과 같습니다. 그것이 사용되는 형태에 너무 가깝게 묶여있다.

미리 도움을 청하십시오. 나는 이것이 의미가 있기를 바랍니다. 필자는 여전히 기본 개념을 파악하고 있으므로 유사한 코드를 사용하는 기존 코드를 지적하거나 특정 문서 나 통찰력을 제공 할 수있는 기사를 참조 할 수 있다면 특히 유용 할 것입니다.

Answer 1

# 1에서 Angular-UI 디자인은이를 구현하기위한 매우 "각도적인"방법입니다. 아무런 문제가 없습니다. 지시문은 목록을 받아 선택한 목록 항목을 반환합니다. 이것이 컨트롤러가 보는 방법입니다. 다시 말해, 다른 지시자, 예를 들어 <select> 또는 사용자 정의 무한 스크롤 또는 눅눅한 스타일 맵은 다른 View 동작을 제공하지만 컨트롤러의 관점에서 기능적으로 동등한 것입니다. 즉 관심사의 분리를 유지합니다. 그대로, 따라서 매우 MVVM-y입니다.

나는 또한 당신이 ng-model에 대해 혼란을 가지고 있다고 생각합니다. ng-model은 사용자가 직접 상호 작용하는 입력 컨트롤 (<input>은 물론)과 함께 사용해야합니다. 이 경우 입력은 typeahead 지시문입니다.

# 2에서 "기타 관련 세부 사항"이 서비스 API의 자연스러운 부분인지 아니면 선택 후 가져와야하는지 여부에 따라 다릅니다. 전제를 가정하면, 올바른 장소는 이론 상으로는 서비스입니다. 컨트롤러는 서비스에서 ViewModel까지 데이터를 마샬링해야합니다.

예를 들어 국가 코드를 사용하는 경우 API는 address_components 속성에 여러 구성 요소를 반환합니다. 국가 코드를 추출하고 존재 여부와 기타 비즈니스 로직을 확인하는 것뿐만 아니라 선택 후 다른 서비스 API를 사용하거나 원래 주소 목록을 얻은 경우 서비스에서 처리하는 것이 가장 좋습니다. 당신의 경우. 간단한 응용 프로그램의 간단한 예를 들어

은 예처럼, 당신 은 당신의 컨트롤러 (또는 오히려 당신의 ViewModel)이 실제로 필요로 실제 개체의 목록을 반환 $scope.getLocation() 기능을 수정 한 다음를 가질 수 보기는 선택한 객체를 반환합니다 (# 1 기준).