[英]AngularJS - Closing the modal
I want a close button, the x at the top right corner, and click outside the modal to close the modal window.我想要一个关闭按钮,右上角的 x,然后在模态外单击以关闭模态窗口。
Here I created the button to open the modal: (rollup.html)在这里我创建了打开模态的按钮:(rollup.html)
<li style="float: right;">
<button id="myBtn" ng-click="printDivModal('rollup-tab', test)">Modal Test</button>
</li>
This opens the modal: (rollup.js)这将打开模态:(rollup.js)
app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
.....
$scope.printDivModal = function(divName,test) {
console.log('opening pop up');
var ModalInstance = $uibModal.open({
scope: $scope,
animation: $scope.animationsEnabled,
templateUrl: 'app/views/modals/stackedModal.html',
size: 'xl',
controller: 'PrintViewCtrl',
backdrop : 'static',
resolve: {
test: function () {
return test;
}
}
});
}
});
And here is the content of the modal itself: (stackedModal.html)这是模态本身的内容:(stackedModal.html)
<div class="modal-footer">
<button ng-click="closeModal()" type="button" class="btn btn-default">Close</button>
<!-- data-dismiss="modal" -->
</div>
Here I wrote the scope to close the modal, but it does not seem to work.在这里我写了关闭模态的范围,但它似乎不起作用。 When I click the close button, the alert appears, but the action is not executed.: (stackedModal.js)当我单击关闭按钮时,会出现警报,但不会执行操作。: (stackedModal.js)
app.controller('PrintViewCtrl', rollUpCtrl);
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal', 'headersvc','locFiltersvc']
function rollUpCtrl($scope, $rootScope, $http, $uibModal, $modalInstance, headersvc, locFiltersvc) {
.....
$scope.closeModal = function () {
alert("close the modal!");
$modalInstance.close();
};
}
Any help is appreciated.任何帮助表示赞赏。
EDIT FOR RESOLVE (rollup.js)编辑解决(rollup.js)
app.controller('PrintViewCtrl', function($scope, $http, $rootScope, $uibModalInstance) {
$scope.test = function() {
$scope.regionName;
$scope.groupName;
$scope.mcName;
$scope.districtNumber;
$scope.routeNumber;
$scope.weekEndDate;
};
});
This is the data I want to pull from (route.html)这是我想从中提取的数据(route.html)
<div class="row">
<div class="col-xs-6 col-md-4">
<label>Region:</label>
<span>{{regionName}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>Group:</label>
<span>{{groupName}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>MC:</label>
<span>{{mcName}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>District #:</label>
<span>{{districtNumber}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>Route #:</label>
<span>{{routeNumber}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>Week Ending Date:</label>
<span>{{weekEndDate}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>RSR:</label>
<span style="text-transform: capitalize;">{{rsrName}}</span>
</div>
</div>
First, the latest version of the library injects $uibModalInstance
not $modalInstance
, so double check that.首先,库的最新版本注入$uibModalInstance
而不是$modalInstance
,因此请仔细检查。 Additionally, you are not injecting the $uibModalInstance
in your controller definition:此外,您没有在控制器定义中注入$uibModalInstance
:
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal', '$uibModalInstance', 'headersvc','locFiltersvc'];
function rollUpCtrl($scope, $rootScope, $http, $uibModal, $uibModalInstance, headersvc, locFiltersvc) {
Second, backdrop: static
will prevent the modal from closing by clicking on the backdrop.其次, backdrop: static
将通过点击背景阻止模态关闭。 Try backdrop: true
instead.试试backdrop: true
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.