Model binding not working in Angular UI Bootstrap modal

Question

I have simple example using Angular UI Bootstrap modal service. In this example I don't understand why model binding is not working. Instead of seeing "Doing something..." on modal dialog I see "{{message}}". What I need to change?

Example is here: http://plnkr.co/edit/fJhS3e7At11tJTuNSWAB?p=preview

modal html looks like this:

<div ng-app="myModule">
    <div ng-controller="modalInstanceController" class="modal-body">
        <div>{{message}}</div>
    </div>
</div>

And definition of module and controllers:

var myAppModule = angular.module('myModule', ['ui.bootstrap']);

myAppModule.controller('modalInstanceController', function ($scope, $modalInstance, message) {
    var vm = this;
    vm.message = message;
});

myAppModule.controller('myController', function ($scope, $modal) {


        $scope.open = function open() {

            var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                backdrop: 'static',
                //windowClass: 'custom-modal-wait',
                dialogFade: false,
                keyboard: false,
                controller: 'modalInstanceController',
                resolve: {
                    message: function () {
                        return "Doing something ...";
                    }
                }
            });

            setTimeout(function(){
                modalInstance.close('close');
                },5000);
        }

});

Iliya Reyzis · Accepted Answer · 2015-05-03 22:58:07Z

2

to use the value you pass to the modal, you need to put it on its scope, so set the modal controller as so:

myAppModule.controller('modalInstanceController', function ($scope, $modalInstance, message) {
    $scope.message = message;
});

and remove the ng-controller from modal.html, you are already assigning him a controller when you create the modal instance

ng-controller="modalInstanceController"

your fixed example : http://plnkr.co/edit/vnfL72EBMXsQ1NzlJNEF?p=preview

answered May 3, 2015 at 22:58

Iliya Reyzis

3,7272 gold badges21 silver badges32 bronze badges

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

3 Comments

bambi Over a year ago

Thanks. Is is possible to somehow declare message on this object in modalInstanceController?

Iliya Reyzis Over a year ago

Sure. You mean to pass an object to the Modal? look at this plnkr, is that what you mean? plnkr.co/edit/AISzGdRdr24Ai4ROcnFh?p=preview

bambi Over a year ago

What I wanted is this: plnkr.co/edit/fJhS3e7At11tJTuNSWAB?p=preview But anyway, your answer was true.

Collectives™ on Stack Overflow

Model binding not working in Angular UI Bootstrap modal

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related