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

일단 열면 모달 안에있는 내용을 어떻게 대체 할 수 있는지 설명 할 수 있습니까? 특정 websocket 이벤트가 발생하면 모달을 여는 중입니다.모달 콘텐츠를 연 후 교체 하시겠습니까? AngularUI Bootstrap

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

내 코드는 모달를 엽니 다 :

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 내가 웹 소켓에서 얻을 문자열입니다. 그것이 모달 내부를 대체해야합니다.

건배,

도시락

출처

2016-09-20 Bento

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

내가는

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

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

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

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

출처

2016-09-26 13:10:22 Bento

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

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

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

출처

2016-09-20 17:07:32

: P 당신의 plunkr이 잘 작동합니다. 내가 작업 할 수있는 코드를 얻을 수 있는지 알게 될 것입니다. $ rootScope를 사용하여 변수를 ModalController에 전달할 수 없습니까? – Bento

플 런커를 내 Modalservice와 통합하는 방법에 대한 아이디어가 있으십니까? http://kopy.io/UOSav $ scope.open을 사용하고 있지만이 서비스를 사용하여 모달을 열고 있습니다. – Bento

당신의 [UOSav] (http : // kopy.io/UOSav)는 404입니다. $ scope.open을 사용하고 있지는 않지만 사용하고있는'angular-ui.bootstrap'의'$ uibModal.open()'을 사용하고 있습니다. 하지만 더 중요한 점은 템플릿 대신 r.message.description인데 해결안에 같은 글자를 쓰면 작동 할 것입니다. 'modal.html'에 전달하면됩니다. {item}}'. –

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

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

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

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

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

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

출처

2016-09-20 17:08:28

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

답변

관련 문제