AngularJS - 대화 상자에서 열린 컨트롤러 (동적으로로드 된 템플릿)

Question

저는 AngularJS로 놀고 있습니다. 나는 컨트롤러와 templateUrl을 사용하여 자동으로 일을 처리한다. 현재 레이아웃에는 모든 것들이로드되는 <div ng-view></div> 지시어 만있다.

나는 주어진 링크에 의해 지정된 컨트롤러 (모달의 몸 내부 ) 모달 (부트 스트랩 또는 jQuery를 UI는 중요하지 않습니다) 및이 부하 을 열고 싶습니다

. 그냥 모든 링크와 같은

는 "개방"내 주요 ng-view 내부 (& 모든 DOM 편집 & 연결을 수행하는 템플릿을로드), 나는 모달 내부 열려면 링크의 일부를 싶습니다.

AngularStrap 및 Angular-UI Bootstrap이 제공해야하는 기능을 확인했으며 그 중 어느 것도 내가 원하는 바를 가지고 있지 않습니다.

AngularStrap은 새 부분 템플릿을 얻을 수 있지만 새 컨트롤러는 실행하지 않습니다.

모달/대화 상자에서 두 번째 컨트롤러를 실행하는 솔루션/스 니펫이 있습니까?

Answer 1

Here's a plnkr 각도 + ui 부트 스트랩을 사용하여 자체 템플릿과 컨트롤러로 대화 상자를 시작하는 방법을 보여줍니다.

컨트롤러와 DOM 사이의 관계에 대해 약간 혼란스러운 것처럼 들립니다. 컨트롤러는 DOM 내부에 존재하지 않습니다. 사실 우리는 두 가지를 구별하려고 노력하고 있습니다. 오히려, DOM은 ... (당신이 짐작 했겠지만 ...) 컨트롤러에 의해 제어되는 $ 범위와 관련이 있습니다.

예를 들어, 대화 상자 요소가 DOM에 추가 될 때 컨트롤러가로드되지만 컨트롤러가 의미있는 방식으로 "대화 상자에서 열리지"않습니다. 다이얼로그는 주 앱이 사용하고있는 컨트롤러와 똑같이 쉽게 사용할 수 있습니다. "DialogCtl"을 데모 라인 17의 "DemoCtl"으로 바꿉니다. 제가 말하고자하는 것은 컨트롤러와 대화 상자가 독립적이라는 것입니다. 대화 상자는 컨트롤러를 실행하지 않고 오히려 $scope을 사용합니다.

업데이트 : 예제를 약간 버그가 있음을 알았습니다. 대화 상자를 닫은 다음 다시 여는 경우 모달이 표시되지만 대화 상자는 표시되지 않습니다. 나는 그걸 알아 내려고하고 있는데, 무슨 일이 일어나고 있는지 잘 모르겠다. ...

업데이트 2 : 대화 상자를 다시로드 할 수 없다는 것은 템플릿 캐싱과 관련이 있다고 생각합니다. this plnkr에서는 쿼리 문자열에 '캐시 버스터 (cache buster)'를 추가하고 대화 상자가 다시로드되지만 모달 배경은 그렇지 않습니다. example on the ui-bootstrap 페이지는 문제없이 다시로드 된 &으로로드 할 수 있지만 템플릿 URL이 아닌 하드 코딩 된 템플릿을 사용하고 있습니다. 나는 plnkr에서 그 일을 할 수 없었다. 아, 출혈 가장자리에 작업의 즐거움 : -/

UPDATE 3 : 무슨 일인지 알아,하지만 $dialog 지침이 아니라고 도움 Opening the same dialog multiple times with $dialog

Answer 2

그것은 솔기이 질문을 게시 할 수 없습니다 현재 버전은 ui-bootstrap입니다. http://angular-ui.github.io/bootstrap (0.11)

대안 지시어는 modal 수 : 여기 http://angular-ui.github.io/bootstrap/#/modal

가 어떻게 작동하는지, 볼 수있는 Plunker입니다. http://plnkr.co/edit/?p=preview

Answer 3

$mdDialog.show({ 
       locals: {alert:"message"}, 
       controller: DialogController, 
       templateUrl: 'apps/sidebar/views/dialog1.tmpl.html', 
       parent: angular.element(document.body), 
       clickOutsideToClose:true 
      })