Capture hide event in $modal of angular strap

问题:

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 :

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

回答1:

so the solution is very simple, I had to provide the scope to the $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

回答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 :

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 .

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.

Therfore any events which are bubbled up via $emit, from this particular scope can only be caught by the $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

Hope this helps :)