Question

我正在尝试在父控制器上弹出一个模态，并在使用单击按钮后对孩子做一些事情

例如，儿童控制器

$scope.openModal = function(){
    var item = 'my first item'
    $scope.showItem(item);

    //I want to do something here after user clicks 'Click me' button
})

父控制器

$scope.showItem = function(item){
    $modal({
                template: 'item-modal.html',
                scope: $scope,                
          });
})

在我的item-modal.html

中

//other html
<button type="button" class="btn btn-primary" ng-click="confirm()">Click me</button>

所以我希望孩子能够知道父母的动作，即被点击的模态按钮。有没有办法做到这一点？非常感谢！

Answer 1

您可以通过$broadcast收听事件，以收听父链下的事件。

// Parent controller
$scope.confirm = function() {
  $scope.broadcast("myTestEvent", {'key':'value'});
}


// Child controller
$scope.$on("myTestEvent", function(data) {
  console.log("Event from parent fired with data as : " + data );
})

Answer 2

angular-ui modal，对吧？

如果是这样，$ modal api会返回一个promise，当使用$ close（成功）或$ dismiss（失败）关闭模态时解析。有关详细信息，请参阅https://angular-ui.github.io/bootstrap/#/modal，有关承诺的信息，请参阅https://docs.angularjs.org/api/ng/service/ $ q。

所以这几乎看起来像这样：

$scope.openModal = function(){
    var item = 'my first item'
    $scope.showItem(item).then(function(result) {
      // DO something with result
    });
});

父控制器

$scope.showItem = function(item){
    return $modal({
                template: 'item-modal.html',
                scope: $scope,                
          });
})

在我的item-modal.html

中

//other html
<button type="button" class="btn btn-primary" ng-click="$close(myResult)">Click me</button>

或使用您自己的方法作为ng-click处理程序，它将调用$ scope。$ close与您希望传回的任何内容作为承诺结果。

如何在我的案例中检测点击事件

2 个答案: