javascript - Angular 用户界面 Bootstrap : promise resolved/rejected when modal closed

标签 javascript angularjs twitter-bootstrap promise angular-promise

我正在使用 angular-ui-bootstrap bridge library 开发 angular 和 bootstap。我想要实现的是重用 modal component并将其包装在 promise 中,当模态成功关闭(按下 OK 按钮时)或被拒绝(按下或在模态外单击 cancel 按钮时)将得到解决。

据我所知,桥库中有$modal服务,它只有一个方法可用:open(options)。还有内置的 angular promise implementation : $q。我正在寻找一种方法将两者结合起来。

我想要一个自定义组件(一个服务,工厂?),它将提供一个返回 promise 的 startFlow 方法。调用 startFlow 也会打开 Bootstrap 模式。当模式关闭(正面或负面)时, promise 将得到解决或拒绝。

有人可以提示如何实现吗?到目前为止,我还没有设法找到现有的解决方案...

最佳答案

open 返回的对象的 result 属性是一个完全按照您描述的方式运行的 promise 。事实上,文档中的示例位于 https://angular-ui.github.io/bootstrap/#/modal使用它:

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

可以看到在这个 Plunker 中工作 http://plnkr.co/edit/ro5Dnkg0p9wYWlMCRqlN?p=preview

关于javascript - Angular 用户界面 Bootstrap : promise resolved/rejected when modal closed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29316681/

相关文章:

javascript - 无法在页面上显示 JSON

javascript - 当有多个可用时, typescript 使用不正确的类型和 Jest

javascript - 将CSS规则写到不同的浏览器,如何?

javascript - 如何激活当前选项卡

html - 如何使 Bootstrap 模式从底部淡入?

jquery - 使用 btn-primary 的 Twitter Bootstrap 按钮组

javascript - 如何记录立即调用 + 匿名函数?

javascript - angularjs 指令中的按钮不起作用

javascript - $rootScope.$on 在服务或工厂中

jquery - 导航栏必须直接出现在第二个 div 中