Question

我使用角度带创建一个模态，如：

$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>

然而即使在所有这些之后，当我点击Ok时我也没有得到控制台日志。这是为什么？

Answer 1

$ emit和$ broadcast是角度事件处理机制，与纯JavaScript中发现的事件不同。后者遍历您网页的DOM。 angular中的$ event遍历模块中存在的作用域层次结构。这里所说的是角带式模态源代码的摘录：

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创建该范围的子项。否则，它会创建一个范围，该范围是在层次结构中最顶级范围的子项。

因为 $ rootScope ，只能通过$ emit从这个特定范围冒出来的任何事件。

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

中的'model.hide'和其他事件的原因

希望这会有所帮助：）

在$ modal角度带中捕捉隐藏事件

1 个答案: