打开后替换模态内容？角形用户界面 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 是我从 websocket 获取的字符串。这就是我需要在模态中替换的内容。

干杯，

便当

Answer 1

这是我创建的示例 plunker，您可以在其中了解如何将数据传递给模态。

使用 resolve 将映射注入给定的 ModalController。你可以在你的决心中写同样的东西或者更好地使用 angular.copy 就像我所做的那样（它只是为了更清晰的编码）。

尝试用我的 $scope.name 替换你的 r.message.description。然后你调用你的控制器（注意这里是一个函数），还有一个额外的 item （你应该使用依赖注入来缩小代码）。此项可帮助您将数据传递给模态，模态继承了 resolve.

的相同内容

Answer 2

使用这种方法，渲染静态模板

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

并在模态控制器中管理 "myScopeVar"。

如果它是带有 angular 指令的模板，请使用自定义指令，这将编译您的模板。

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

要实现编译模板指令，您应该使用 $compile 服务。

Answer 3

感谢您的回复，我都试过了，但在这个特定案例中，我最终使用事件将数据从一个控制器传送到另一个控制器。

在 MainController 中我正在做一个

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

并且在 ModalController 中我正在监听事件：

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

打开后替换模态内容？角形用户界面 Bootstrap

Replacing modal content after it's opened? AngularUI Bootstrap

javascript

angularjs

angular-ui

angular-ui-bootstrap