CODEWITHSUNDEEP
twitter-bootstrapangularjsmodal-dialog
Shamoon
Shamoon

Reputation: 43617

How can I populate Modal data with Angular JS?

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

Answers (1)

kmdsax
kmdsax

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

Related Questions