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');
}
});
