Bento de Gier Bento de Gier - 2 months ago 13
Javascript Question

Replacing modal content after it's opened? AngularUI Bootstrap

Could someone explain how I can replace the content inside a modal once it's opened? I'm opening a modal when a specific websocket event is fired.

After that event I get status updates and I want to replace the modal content with those statuses.

My code to open a modal:

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
is a string I get from the websocket. That's what I need to replace inside the modal.

Cheers,

Bento

Answer

Thanks for both replies, I've tried them both but in the end I've used events to bring data from one controller to another in this specific case.

In the MainController i'm doing a

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

and in the ModalController I'm listening for the event:

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