打开后替换模态内容？ AngularUI 引导程序

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

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

使用resolve将地图注入到您给定的

ModalController

中。您可以在您的解决方案中写下相同的内容，或者更好地使用

angular.copy

，就像我所做的那样（只是为了更清晰的编码）。

尝试用我的

r.message.description

替换你的

$scope.name

。然后，您可以调用控制器（请注意这里是一个函数），并附加一个

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