我做了一个alertForm指令,并想在按键ESC
或click outside of modal
之后将'show'设置为'false'。
我对'show'变量使用双向绑定将其关闭。
<alert-modal show="showAlertModal"></alert-modal>
// controller
$scope.showAlertModal = true;
// directive
common.directive('alertModal',function () {
var temp = '<div class="modal fade" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myModalLabel">\n' +
' <div class="modal-dialog" role="document">\n' +
' <div class="modal-content">\n' +
' <div class="modal-body">\n' +
' <h5>This is message section</h5>\n' +
' </div>\n' +
' <div class="modal-footer">\n' +
' <button type="button" ng-click="clickYesAndHide()">Yes</button>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' </div>';
return {
restrict: 'E',scope: {
show: '=',},replace: true,// Replace with template
transclude: true,// To use custom content
link: function ($scope,$element,$attr) {
$scope.modalOpen = function () {
$element.modal();
}
$scope.modalClose = function () {
$element.modal('hide');
};
$scope.noDisplay = function () {
$scope.show = false;
}
$scope.clickYesAndHide = function () {
$scope.noDisplay();
}
$element.on('hide.bs.modal',function () {
$scope.noDisplay();
console.log($scope.show); // false;
// But parent's $scope.showAlertModal is 'true'
})
$scope.$watch('show',function () {
$scope.show
? $scope.modalOpen()
: $scope.modalClose()
});
},template: temp
}
});
我希望父范围show
变量为false
,但是当我在模态之外单击时,仍然输出为true
。在关闭模式之前如何设置父范围?