AngularJS: passing a model into and out of a Bootstrap UI modal

Question

I am having trouble with my Bootstrap UI modal.

I have a modal to capture address details from the user, but the model is always empty for some reason. An extract of my template:

<form class="form-horizontal" style="padding: 64px;">
    <div class="form-group">
        <label for="firstName" class="col-sm-3 control-label">First name</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="firstName" ng-model="model.firstName">
        </div>
    </div>
    <div class="form-group">
        <label for="lastName" class="col-sm-3 control-label">Last name</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="lastName" ng-model="model.lastName">
        </div>
    </div>
    <!-- etc -->
</form>

And my controller:

module Test.Controllers {
    "use strict";

    export class ChooseAddressController {
        static $inject = ["$modal", "AddressService"];

        private addressService: Services.AddressService;

        public addresses: Array<Models.Address>;
        public modal;

        constructor($modal, addressService: Services.AddressService) {
            this.addressService = addressService;
            this.modal = $modal;
        }

        public newAddressClicked(): void {
            var newAddress = this.addressService.createNewAddress();
            this.editAddress(newAddress);
        }

        public editAddress(address: Models.Address): void {
            address.firstName = "Test 1";
            address.lastName = "Test 2";

            var modalInstance = this.modal.open({
                animation: true,
                templateUrl: 'dialogs/editAddressDialog.html',
                backdrop: "static",
                backdropClass: "windowModal",
                keyboard: false,
                resolve: {
                    model: () => address
                }
            });
        }
    }
}

I would expect that the dialog contains the "Test 1" and "Test 2" data, but it doesn't. I have looked at this plnkr as suggested by this post but it doesn't appear to work for me, which is frustrating.

What am I doing wrong?

score 0 · Answer 1 · answered Aug 28 '15 at 15:37

Hey this is the approach I use for passing data between controller and modals and back:

//Inject $modal into your Controller

//Call the modal from your controller


$scope.myModal = function() {
    var modalInstance = $modal.open({
        templateUrl: "some/ur/to/your/template.html",
        controller: "MyModalController",
        size: "lg",
        //Data which has to be passed into the MyModalController
        resolve: {
            data: function () {
                return {                    
                    someData: $scope.someRandomDataWhichModalNeeds
                };
            }
        }
    });

    //When $scope.confirm() is called from inside the modal do some shit with the new data!
    modalInstance.result.then(function (result) {
            console.log(result.modalData)

    });
}

//Handle data insde your modal  
//data param will be your values you need pass in
//If you want add some new data inside your modal just build upon the modalData object

function MyModalController($scope, $modalInstance, data) {

    //assign the data you passed in to the modals scope so you can bind to it
    $scope.modalData = data;
    $scope.result = {
        modalData: $scope.modalData
    }

    //Dismiss() - call this in your modal template to dismiss the modal
    $scope.cancel = function () {
        $modalInstance.dismiss();
    }

    //Call this in your template so send all the modal data back to the controller
    $scope.confirm = function () {
        $modalInstance.close($scope.result);
    }
}


//In your template file you would bind your data:
{{ modalData.someData }}

AngularJS: passing a model into and out of a Bootstrap UI modal

1 Answers1