javascriptangularjsangular-ui-bootstrapangular-ui

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.


Solution

  • 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;
    });