1

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

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

2 Comments

Getting a Firebug error: Error: [$parse:lexerr] Lexer Error: Unterminated quote at columns 31-32 ['] in expression [views/modals/myModal.html'].
my bad, I left out a single-quote in the ng-include src. See updated answer, it should be src="'.....'"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.