角度模態讓用戶點擊它

我在我的angularJS應用程序中有一個模態對話框，但是當用戶點擊模態後面的灰色網站時，模式關閉。我希望模態表現得像一個模態，也就是說，你必須響應內部的內容才能完成模態。任何人都可以告訴我如何實現這一目標？這裏是一個jsbin：角度模態讓用戶點擊它

http://jsbin.com/aDuJIku/2/edit

編輯：代碼以供將來參考：

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body ng-app='ModalDemo'> 
    <div ng-controller='MyCtrl'> 
    <button ng-click='toggleModal()'>Open Modal Dialog</button> 
    <modal-dialog show='modalShown' width='400px' height='60%'> 
     <p>Modal Content Goes here<p> 
    </modal-dialog> 
    </div> 
</body> 
</html> 

app = angular.module('ModalDemo', []); 
app.directive('modalDialog', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     show: '=' 
    }, 
    replace: true, // Replace with the template below 
    transclude: true, // we want to insert custom content inside the directive 
    link: function(scope, element, attrs) { 
     scope.dialogStyle = {}; 
     if (attrs.width) 
     scope.dialogStyle.width = attrs.width; 
     if (attrs.height) 
     scope.dialogStyle.height = attrs.height; 
     scope.hideModal = function() { 
     scope.show = false; 
     }; 
    }, 
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>" 
    }; 
}); 

app.controller('MyCtrl', ['$scope', function($scope) { 
    $scope.modalShown = false; 
    $scope.toggleModal = function() { 
    $scope.modalShown = !$scope.modalShown; 
    }; 
}]);

來源

2014-03-31 bookthief

plz從jsbin發佈代碼以及問題。如果該鏈接將來到期...應該仍然可以在將來訪問該問題的用戶使用 – iJade

好點，上面編輯。 – bookthief

在你的指令的模板的這一部分，刪除NG點擊= 'hideModal（）'就大功告成了。

<div class='ng-modal-overlay' ng-click='hideModal()'>

來源

2014-03-31 11:58:49

簡潔而又完美！ – bookthief

假設你正在使用引導程序設置的背景是靜態的。

var modalInstance = $modal.open({ 
    templateUrl: '/App/Documents/Templates/DeleteDocumentDialogTemplate.html', 
    backdrop: 'static' 
});

來源

2014-03-31 11:56:50 BenCr

角度模態讓用戶點擊它

回答

相關問題