模态解雇后未处理AngularJS UI Bootstrap Scope [英] AngularJS UI Bootstrap Scope not disposed after modal dismiss
问题描述
plunker: http://plnkr.co/edit/CrvOFHSfGnXFFWbaXNxn?p=preview
关闭对话框后，似乎没有处理模态的范围.我有在某些div可用时发出的指令，而模态控制器接收到它.它在第一次打开和关闭时工作正常，一个发出一个接收.在第二个对话框打开和关闭时，一个发射和两个接收，表明存在两个控制器实例，随后的任何对话框打开和关闭都会继续.
It seems scope for modal is not disposed of after closing the dialog. I have directive that emits when certain div is available, and modal controller receives it. It works fine on first open and close, one emit one receive. On 2nd dialog open and close, one emit and two receives, showing that there are two controller instances, and it goes on for any subsequent dialog open and close.
反省了模态对话框之后，是否有必要确保处置控制器范围?
Is there anyway to make sure to dispose controller scope after modal dialog is dismissed?
html:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" my-hook>
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
js:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, $rootScope, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$rootScope.$on ('MyTestHook', function(event) {
console.log("MyTestHook received");
});
});
angular.module('ui.bootstrap.demo').directive('myHook', function($timeout,$rootScope) {
function link(scope,element,attrs) {
$timeout(function(){
scope.$root.$emit("MyTestHook");
},500);
}
return {
link: link
};
});
推荐答案
这不是Modal的问题.撤消时，模态范围被完全破坏.
This is not the problem of Modal. Modal scope is destroyed completely on dismiss.
问题出在代码中，因为您在$ rootScope上附加了$ on，所以每次单击模型时，它都会在$$ listeners中添加新的侦听器，并且由于$ rootscope不会被丢弃，因此侦听器的计数增加了一个.
Problem is in the code as you have attached $on on $rootScope so every time you click on model it add new listener in $$listeners and listener's count increased by one because $rootscope doesn't get disposed.
$rootScope.$on ('MyTestHook', function(event) { //every call to open modal will add new listener in rootscope
console.log("MyTestHook received");
});
为避免这种情况，请在模态解雇的作用域上附加$ on.
To avoid this use attach $on on scope that disposed on modal dismiss.
请参见下面的调试器图像.
See below debugger image.
http://plnkr.co/edit/iR7rGCFgIchsk4sBg26Q?p=preview
这篇关于模态解雇后未处理AngularJS UI Bootstrap Scope的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
