How to pass a result from modal of angular-ui-bootstrap to parent without closing?

according to the https://angular-ui.github.io/bootstrap/#/modal, I want to pass a result from modal to the parent without closing but in the example code, they only show a passing result to parent via closing

根据https://angular-ui.github.io/bootstrap/#/modal,我想将结果从modal传递给父而不关闭,但在示例代码中,它们只显示通过关闭传递给父对象的结果

$uibModalInstance.close($scope.selected.item);

I want to pass a data to parent when the item is clicked but I do not know to do it. I really need help. Thanks.

我想在单击项目时将数据传递给父项,但我不知道这样做。我真的需要帮助。谢谢。

2 个解决方案

#1

This is a quite common problem about communicating between controllers since you don't want to close the model and wants to pass the data to a different controller.

这是关于控制器之间通信的一个相当普遍的问题,因为您不想关闭模型并希望将数据传递给不同的控制器。

The quickest path to your problem is using $broadcast. In the controller of your modal, write like this:

问题的最快途径是使用$ broadcast。在模态的控制器中,写如下:

// Make sure to use $rootScope
$rootScope.$broadcast("modalDataEventFoo", {selectedItem: $scope.selected.item});

Now, in your parent controller:

现在,在您的父控制器中:

$scope.$on("modalDataEventFoo", function(data) {
     console.log("got the data from modal", data.selectedItem);
});

Other references for communication between controllers:

控制器之间通信的其他参考:

What's the correct way to communicate between controllers in AngularJS?

AngularJS中控制器之间通信的正确方法是什么?

https://egghead.io/lessons/angularjs-sharing-data-between-controllers
http://www.angulartutorial.net/2014/03/communicate-with-controllers-in-angular.html
Communication between controllers in Angular

Angular中控制器之间的通信

#2

Another way is to share the scope between the parent controller and the modal controller declaring scope property in the options:

另一种方法是在父控制器和模式控制器之间共享范围,声明选项中的scope属性:

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

Check this plunker in which the modal contains an input element bound to the variable $scope.shared.name: http://plnkr.co/edit/4xiEXATxAnvDKBSXxzQd

检查此plunker,其中modal包含绑定到变量$ scope.shared.name的输入元素:http://plnkr.co/edit/4xiEXATxAnvDKBSXxzQd

#1