捕获隐藏事件在$模式的角带

I am using angular Strap to create a modal like :

我正在使用角带创建一个模态像:

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

I have the written the following :

我写了以下内容:

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

My /templ/alert-with-title.html is like this :

我的/ 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>

However even after all this, I get no console logs when i click Ok. Why is this?

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

2 个解决方案

#1

so the solution is very simple, I had to provide the scope to the $modal.

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

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

But what I do not understand that why for an event that is "$emit" , $on of the outside scope would not work

但我不理解的是，为什么对于一个“$emit”的事件，$on的外部作用是不起作用的

#2

$emit and $broadcast are angular event handling mechanisms are distinct from events that are found in pure JavaScript. The latter traverse the DOM of your web page. the $event in angular traverses the scope hierarchy present in your module. With that being said here is an excerpt from the source code of angular-strap modal :

$emit和$broadcast是角事件处理机制，不同于纯JavaScript中的事件。后者遍历web页面的DOM。$事件的角度遍历了模块中的范围层次结构。说到这一点，下面是一段节选自angular-strap模式的源代码:

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();

the parameters you pass as the argument for your $modal service is the config object. the default object contains the default values for the parameters. The line of interest is the last line .

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

There it checks wether you have provided a scope object as one of the parameters. If so then a child of that scope is created via scope.$new. Else it creates a scope which is the child of the top most scope in the heirarchy.

它检查您是否提供了一个范围对象作为参数之一。如果是，那么该作用域的子对象将通过作用域创建。$new。否则，它将创建一个范围，这个范围是继承制中最高范围的子范围。

Therfore any events which are bubbled up via $emit, from this particular scope can only be caught by the $rootScope.

在通过$emit产生任何事件之前，只有$rootScope才能从这个特定范围捕捉到这些事件。

In the code you posted in the question you did not provide any scope object in the parameters. Hence a child of the $rootScope is created, not of the current $scope you were working in. In the second code you posted , a child scope of your current $scope is created. That is the reason why you are able to handle the 'model.hide' and other events from your current $scope

在问题中发布的代码中，您没有在参数中提供任何范围对象。因此创建了$rootScope的一个子元素，而不是您当前使用的$scope。在您发布的第二段代码中，创建了当前$范围的子范围。这就是您能够处理“模型”的原因。隐藏您当前$scope中的其他事件。

Hope this helps :)

希望这有助于:)

#1