在打开后替换模态内容?AngularUI引导

Replacing modal content after it's opened? AngularUI Bootstrap

本文关键字：AngularUI 引导 模态 替换      更新时间：2023-09-26

有没有人能解释一下，一旦打开，我如何替换模态中的内容?当一个特定的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得到的字符串。这就是我需要在模态中替换的内容。

欢呼,

盒饭

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

使用resolve将映射注入给定的ModalController。你可以写同样的在你的解决或更好地使用angular.copy像我所做的(它只是为了更清晰的编码)。

试着用我的$scope.name代替你的r.message.description。然后调用控制器(注意这里是一个函数)，使用额外的item(您应该使用依赖注入来减少代码)。这个项目可以帮助你将数据传递给模态，它继承了你的resolve。

使用这种方法，来呈现静态模板

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

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

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

template: '<div compile-template="myScopeVar"></div>'
要实现编译模板指令，你应该使用$compile service。

感谢这两个回复，我都试过了，但最后我用事件把数据从一个控制器带到另一个在这个特定的情况下。

在MainController中我做了一个

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

在ModalController中，我正在监听事件:

$scope.$on("scanFinished", function(evt, data) {
    $scope.result = data;
});
相关文章：