각도 - 동적 구성 요소 생성

Question

예를 들어 모달을 사용하는 컨텍스트를 통해 구조적 질문에 대한 답변을 얻고 싶습니다. 따라서 처음에는 "부트 스트랩의 모달 서비스 사용"으로이 질문에 대답하지 마십시오.

기본적으로, "각도 방식"은 허공에서 벗어나기 위해 html이 필요한 경우에 무엇이 필요한지 알고 싶습니다. 구성 요소 또는 지시문을 적용합니다. 데이터 요청 오류 모달이 좋은 예입니다. 예를 들어 구성 요소가 어떤 종류의 데이터를로드하려고 시도하고 데이터가 어떤 종류의 오류와 함께 다시 발생하면 데이터 서비스에서 프로그래밍 방식으로 모달을 트리거 할 수 있기를 바랍니다.

다음과 같은 질문을 던집니다.이 경우 템플리트는 어디에 있습니까? 제가 틀린 것이 아니라면, 지시어는 페이지에없는 마크 업을 위해 컴파일되지 않을 것입니다. 건축 적 견지에서 바람직합니다 (예를 들어, 페이지에서 사용하기가 쉽지 않은 코드를 원하지 않습니다. 끔찍한 공통점이없는 오류 모달의 경우). 서비스는 컨트롤러에 연결되어야합니다.이 경우 페이지에 마크 업을하지 않으면 동일한 케이스가 추가되지 않습니다.

페이지가로드 될 때 본질적으로 (그리고 제 생각에 바람직하게는) 존재하지 않는 구성 요소를 활성화하기위한 패턴은 무엇입니까? 사용자 경험이 필요할 때까지 모달 구성 요소를 완전히 무시하는 것이 이상적입니다. 지금까지 페이지에 어딘가에 단일 div를 포함하는 ng-if 문이 가장 좋은 방법 인 것 같습니다. 그러나 "잠재적 인"경우 만 지원하는 페이지에 마크 업을 추가하기 때문에 기술적으로 "엉망"입니다.

일부 서비스 또는 컨트롤러 또는 지시문에서 "triggerErrorModal"이벤트를 브로드 캐스팅하고 일부 인수를 전달하고 응용 프로그램이 모달 구성 요소를 위로 돌릴 수있게하는 것이 좋을 것입니다. 참고로이 방법이 효과가있을 수있는 다른 경우가 있으므로 더 일반적인 질문으로 생각하십시오.

생각하십니까?

Answer 1

나는 당신이 부트 스트랩의 모달 서비스에 보내지 않고 싶다고 말한 것을 알고있다. 그러나 .. 소스 코드를 살펴보면 어떻게하는지에 대한 많은 정보를 얻을 수있다.

은 기본적으로 당신은 사용하여 HTML 요소를 추가 할 수 있습니다

var el = angular.element('<div class="new-thing"><my-directive></my-directive></div>') 

페이지에 추가 : 다음

var body = $document.find('body').eq(0); 
body.append(el) 

에 의해 컴파일 :

var compiled = $compile(el)($scope);