Reputation: 43617
I have a modal that opens in Bootstrap currently and want to load it via Angular. I can't use Angular UI for various reasons, so this answer, while great, doesn't help.
Currently, I'm loading the modal with:
<div class="control-btn"><a href="#myModal" data-toggle="modal">Load</a></div>
But that isn't passing the data that I need to the modal.
Any help would be greatly appreciated
Upvotes: 1
Views: 5873
Reputation: 1361
Here is what i have been doing.
First, create an angular template that will be your modal popup. Save this as an html file named "modalTemplate.html" somewhere in your website directory.
<script type="text/ng-template" id="modalTemplate.html">
<h4>welcome to my modal</h4>
<div>
{{someData}}
{{someOtherData}}
</div>
</script>
Next, create a separate controller to manage this template:
MyApp.app.controller("testModalCtrl", ['$scope', 'dialog', 'dataForTheModal', 'otherDataForTheModal',
function testModalCtrl($scope, dialog, dataForTheModal, otherDataForTheModal) {
$scope.someData = dataForTheModal;
$scope.someOtherData = otherDataForTheModal;
$scope.someActionOnTheModal = function () {
//do whatever work here, then close the modal
$scope.dataResultFromTheModal = 'something that was updated'
dialog.close(dataResultFromTheModal); // close this modal
};
}]);
Call the modal like so from your original controller:
$scope.openModal = function () {
var d = $dialog.dialog({
templateUrl: 'modalTemplate.html',
controller: 'testModalCtrl',
resolve: {
dataForTheModal: function () {
return 'this is my data';
},
otherDataForTheModal: function () {
return 'this is my other data';
}
//pass as many parameters as you need to the modal
}
});
d.open()
.then(function (dataResultFromTheModal) {
if (dataResultFromTheModal) {
$scope.something = dataResultFromTheModal
/*when the modal is closed, $scope.something will be updated with
the data that was updated in the modal (if you need this behavior) */
}
});
};
For this to work, you also need to inject $dialog
into your main controller. (just like I have on the testModalCtrl controller above)
Finally, include the template html at the bottom of your page:
<div ng-include src="'pathToYourTemplateFile/modalTemplate.html'"></div>
I like doing modals like this, because storing each modal as a separate template file keeps things organized and keeps your page markup clean. Additionally, this makes it easy to re-use modals throughout your app.
Upvotes: 3