<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Standard message modal</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-default">Yes</button>
<button class="btn btn-default">No</button>
</div>
</div>
I'm new to angularJS, I want the modal to open when it comes across the an alert statement. Basically using modal for alert instead of alert boxes
I'm not sure that you can override the browsers handling of alert. You would at least need to change (find and replace) your Alert code with maybe an injected factory...
The benefit here is that you can inject modalFactory in any controller you need to raise a modal from (which might be all of them) and reuse that code consistently. While it doesn't answer your question of overriding Alert it does provide you a way to programatically show your modal element. here is the plunk http://plnkr.co/edit/0QNxUrQ7DH101VrFD0Me?p=preview hope it helps.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, modalFactory) {
$scope.name = 'ttt';
$scope.RunProcess = function() {
//error occured
modalFactory.show($scope);
}
$scope.Reset = function() {
modalFactory.hide($scope);
}
});
app.factory('modalFactory', function() {
return {
show: function($scope) {
$scope.showModal = true;
},
hide: function($scope) {
$scope.showModal = true;
}
}
});
Then in your view
<body ng-controller="MainCtrl">
<div class="my-modal" ng-show="showModal">
blahhh
</div>
<p>Hello {{name}}!</p>
<div>
<button ng-click="RunProcess()">button that runs a controller method and throws alert</button>
</div>
</body>
Just use something like Angular-Strap : http://mgcrea.github.io/angular-strap/##modals
I don't recommend it. But you can override alert if you want with custom code :
window.alert = function(msg){ console.log(msg) };
alert('foo'); // logs to console
