在 angular 表带的 $modal 中捕获隐藏事件

Question

我正在使用 angular Strap 创建模态，例如：

$modal({
  template : "/templ/alert-with-title.html",
  content : content,
  title : title,
  show : true,
  backdrop : true,
  placement : 'center'
});

我写了以下内容：

$scope.$on("modal.hide.before",function() {
  console.log("Closing1");
});
$scope.$on("modal.hide",function() {
  console.log("Closin2");
});

我的/templ/alert-with-title.html是这样的：

<div aria-hidden="true" aria-labelledby="windowTitleLabel" role="dialog"
    tabindex="-1" class="modal hide fade in modal" id="">
    <div class="modal-header">
        <a class="fui-cross pull-right" ng-click="$hide()"></a>
        <h3 ng-bind="title"></h3>
    </div>
    <div class="modal-body">
        <div class="divDialogElements" >
            <span ng-bind="content"></span>
        </div>
    </div>
    <div class="modal-footer">
        <div>
            <button type="button" ng-click="$hide()"
                class="btn btn-default btn-gray-l gray pull-left mar_t-4">OK</button>
        </div>
    </div>
</div>

然而，即使在这之后，当我点击“确定”时，我也没有看到控制台日志。这是为什么？

Answer 1

所以解决方案很简单，我必须为 $modal 提供范围。

$modal({
  template : "/templ/alert-with-title.html",
  content : content,
  title : title,
  show : true,
  backdrop : true,
  placement : 'center',
  scope : $scope
});

但我不明白为什么对于“$emit”事件，外部范围的 $on 不起作用

Answer 2

$emit 和 $broadcast 是 angular 事件处理机制不同于纯 JavaScript 中的事件。后者遍历您网页的DOM。 angular 中的 $event 遍历模块中存在的范围层次结构。话虽如此，这里摘自 angular-strap modal 的源代码：

function ModalFactory(config) {
var $modal = {};
// Common vars
var options = $modal.$options = angular.extend({}, defaults, config);
var promise = $modal.$promise = $bsCompiler.compile(options);
var scope = $modal.$scope = options.scope && options.scope.$new() || $rootScope.$new();

您作为 $modal 服务的参数传递的参数是 config 对象。 default 对象包含参数的默认值。感兴趣的行是最后一行。

它会检查您是否提供了范围对象作为参数之一。如果是这样，则通过 scope.$new 创建该范围的子级。否则它会创建一个作用域，该作用域是 层次结构中最顶层作用域的子级 。

因此 任何通过 $emit 冒泡的事件，从这个特定的范围只能被 $rootScope 捕获。

在您在问题中发布的代码中，您没有在参数中提供任何范围对象。因此，创建了 $rootScope 的子级，而不是您正在使用的当前 $scope 的子级。在您发布的第二个代码中，创建了当前 $scope 的子级范围。这就是为什么您能够处理 'model.hide' 和当前 $scope

中的其他事件的原因

希望对您有所帮助:)

在 angular 表带的 $modal 中捕获隐藏事件

Capture hide event in $modal of angular strap

modal-dialog

angularjs

angular-strap