Menu
I am new to angular and javascript (sort of) and am trying to figure out how I can register a handler to a bootstrap event in my controller.
I want to do something like this:
$('#mymodal').on('shown.bs.modal', function () {
$scope.password = undefined;
});
Firstly, I can't get jQuery to run within my controller. From my research I am getting a feeling that it is not recommended. Is this true? Also for educational purposes, how could I make jQuery run in my controller if I wanted to?
Secondly, I wrote the following as a replacement for jQuery:
var modal = document.getElementById("mymodal");
modal.addEventListener('shown.bs.modal', function () {
$scope.password = undefined;
}, false);
This doesn't work too. I think that 'shown.bs.modal' is not being "detected" as yet. Any ideas why?
Do I need to require the bootstrap.js file to fix this?
406
See this plunker.
From my research I am getting a feeling that it is not recommended. Is this true? Also for educational purposes, how could I make jQuery run in my controller if I wanted to?
Yes, generally using jQuery in your angular application is not recommended, nor is it generally necessary. However, if you want to use it, you can simply include it before you included the angular library (the plunker linked to above does this). In this case, angular's version of jQuery (jqlite) doesn't support namespaces in it's on() method for event registration, so you probably would need to use jQuery if you're going to use bootstrap; however, you could use ui-bootstrap (the angular version of bootstrap) instead (see below).
This doesn't work too. I think that 'shown.bs.modal' is not being "detected" as yet. Any ideas why?
Do I need to require the bootstrap.js file to fix this?
Yes, you will need bootstrap.js. Here's an excerpt from the plunker:
Header includes:
<head>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
JavaScript:
<script>
var app = angular.module('myapp', []);
app.controller('mycontroller', function($scope, $timeout){
$scope.test = 'Hello World!';
$('#myModal').on('show.bs.modal', function (e) {
$timeout(function(){
$scope.test = 'Model has been opened!';
});
})
});
</script>
However, if you simply want to reset the password field in a modal each time it is open, here's a simpler, more angular way to do it using ui-bootstrap. You can view the full plunker here:
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myController', function($scope, $modal){
$scope.test = 'Hello World!';
$scope.openPopup = function(){
$modal.open({
templateUrl: "popup.html",
controller: "myModalController",
resolve: {
form: function() {
return {
username: 'default_username',
password: 'default_password',
}
}
}
});
}
});
app.controller('myModalController', function($scope, $modalInstance, form){
$scope.form = form;
$scope.close = function(){
$modalInstance.dismiss('cancel');
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
