부모보기/컨트롤에서 인스턴스화 단추를 올바르게 변경하는 방법

Question

전체 페이지 (PageController)에 대해 하나의 컨트롤러가 있고 두 개의보기 (ViewController 및 EditController)에 대해 별도의 자식 컨트롤러가있는 단일 페이지 웹 응용 프로그램을 만들고 있습니다.

ViewController는 앱의 제목 표시 줄에서 "편집"버튼이 필요하고 EditController는 "저장"버튼이 필요합니다. 단추는 동일한 공간을 차지하지만 레이블이 다르며 온 클릭 핸들러가 다릅니다. 제목 표시 줄은 상위 템플릿/컨트롤러 (즉, PageController) 범위에 속합니다.

이 작업을 수행하는 한 가지 방법은 상위 범위에 단추를 만들고 자식 컨트롤러가 텍스트를 변경하고 ng-click 핸들러를 무시하도록하는 것입니다.하지만 Angular를 사용하는 것이 더 좋은 방법 일 것이라고 생각합니다. 나는 자식 컨트롤러가 "삽입"(이 단어의 적절한 사용인지 확실하지 않음) 버튼을 부모 템플릿에 삽입하고 onclick을 로컬에서 처리하여 부모의 불가지론을 안으로 만든다. 하위 컨트롤러 ...

Answer 1

나는 당신의 "의견"에 대해 다르게 생각할 것입니다. 나에게 제목 표시 줄은보기 및보기보기와 같은보기입니다. 따라서 HTML보기에 표시하고자하는 HTML을 모두 포함하거나, 포함시킬 파일을 알아야합니다.

조회수는 모델에 의해 결정됩니다. 보기 및 편집 컨트롤러는 제목 표시 줄 모델이 포함 된 컨트롤러 (또는 서비스)에 정의 된 메서드를 호출하여 일부 상태/속성을 적절하게 설정해야합니다. 제목 표시 줄/HTML은 ng-show/hide 또는 ng-include 지시어를 사용하여 모델/$ scope의 현재 상태를 기반으로 적절한 HTML을 표시하거나 포함합니다.

버튼 클릭에 대한 알림을 받으려면보기 및 수정 스코프가 변경 사항에 대한 $ model/$ scope 속성을 볼 수 있습니다. 예 : <a ng-click="buttonState.clicked=true">...</a> 자식 컨트롤러가 $ watch 콜백 내에서 값을 재설정 할 수 있도록 clicked 속성이있는 객체를 사용하고 있습니다 (프리미티브가 사용 된 경우 재설정이 작동하지 않음 - 새 하위 범위 속성이 만들어 짐).

$scope.$watch('buttonState.clicked', function() { 
    buttonState.clicked = false 
    ... handle button click here ... 
}