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，就像我已经完成的那样（仅仅是为了更清晰的编码）。

尝试将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-template指令，你应该使用$ compile service。

Answer 3

感谢您的回复，我已经尝试了这两个回复，但最后我在这种特定情况下使用事件将数据从一个控制器传送到另一个控制器。

在MainController中我正在做

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

在ModalController中，我正在收听事件：

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

打开后更换模态内容？ AngularUI Bootstrap

3 个答案: