모달 콘텐츠를 연 후 교체 하시겠습니까? AngularUI Bootstrap

Question

일단 열면 모달 안에있는 내용을 어떻게 대체 할 수 있는지 설명 할 수 있습니까? 특정 websocket 이벤트가 발생하면 모달을 여는 중입니다.

그 후 나는 상태 업데이트를 얻고 그 상태로 모달 콘텐츠를 대체하려고합니다.

내 코드는 모달를 엽니 다 :

var modalInstance = $uibModal.open({ 
    animation: true, 
    template: r.message.description, 
    windowTemplateUrl: 'modal.html', 
    controller: 'ModalController', 
    backdrop: true, 
    size: 'lg', 
    resolve: {} 
}); 

modal.html :

<script type="text/ng-template" id="modal.html"> 
     <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title">Document Reader</h4> 
     </div> 
     <div class="modal-body" uib-modal-transclude> 
     </div> 
     <div class="modal-footer"> 
     </div> 
    </div> 
    </div> 
</script> 

r.message.description 내가 웹 소켓에서 얻을 문자열입니다. 그것이 모달 내부를 대체해야합니다.

건배,

도시락

Answer 1

두 답장을 보내 주셔서 감사합니다. 둘 다 시도했지만 결국 이벤트를 사용하여 특정 컨트롤러에서 다른 컨트롤러로 데이터를 가져 왔습니다. MainController에서

내가는

$rootScope.$broadcast("scanFinished", r.message); 

을하고 있어요와 ModalController에서 나는 이벤트를 듣고있어 :

$scope.$on("scanFinished", function(evt, data) { 
    $scope.result = data; 
}); 

내가 그 모든 의미를하려고합니다

Answer 2

다음은 모달로 데이터를 전달하는 방법을 이해하고 볼 수있는 제작 한 샘플 plunker이다.

지도를 사용하여 주어진 ModalController에지도를 삽입합니다. 당신은 당신의 결의안에 같은 글씨를 쓰거나, 내가 어떻게했는지 (더 명확한 코딩을 위해서) angular.copy을 더 잘 사용할 수 있습니다.

r.message.description을 (를) $scope.name (으)로 바꾸어보세요. 그런 다음 컨트롤러를 호출하고 (여기에 함수를 기록하십시오) 추가 코드 item (코드 축소를 위해 종속성 주입을 사용해야 함)을 추가로 호출합니다. 이 항목은 데이터를 모달에 전달하는 데 도움이됩니다.이 모달은 resolve에서 상속받습니다.

Answer 3

사용이 방법은 정적 템플릿을

template: '<div ng-bind-html="myScopeVar"></div>', 
resolve: { 
    eventTemplate: function(){ 
     return r.message.description; 
    } 
} 

렌더링 및 모달 컨트롤러 내부에 "myScopeVar"를 관리 할 수 ​​있습니다.

각도 지시어가있는 템플릿 인 경우 사용자 지정 지시문을 사용하면 템플릿을 컴파일 할 수 있습니다.

template: '<div compile-template="myScopeVar"></div>' 

컴파일 - 템플릿 지시문을 구현하려면 $ compile service를 사용해야합니다.