Scope binding not working in modal popup angularjs

Question

I am using angular to bind data to my UI which works perfectly well. But when a modal popup is called on button click, the binding in the modal does not work.

enter image description here

<div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{checkItem}}</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button ng-click="saveClient()" class="btn btn-primary pull-right btn-tabkey"><i class="fa fa-save"></i>Save</button>&nbsp;&nbsp;
                <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="focusInput=false"><i class="fa fa-ban"></i>Cancel</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>

Angular:

angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) {

    $scope.checkItem = "";

    $scope.loadEditForm = function () {
        $scope.checkItem = "yes";
        $("#modal-form-edit").modal();
    };


}]);

is the modal a directive? if so, directives get their own scope — Sjoerd de Wit
– Sjoerd de Wit, Commented Mar 20, 2015 at 8:11

dfsq · Accepted Answer · 2015-03-20 08:34:42Z

8

Seems like you are opening the modal using plain jQuery approach. This is not going to work in Angular, because opened modal is not connected to Angular application, so it doesn't know that modal has to be handled, HTML parsed, etc.

Instead you should use directives properly, or in case of modal dialog you can simply use existent ones, like Angular UI project, which brings ready Bootstrap directives for Angular. In your case you need $modal service.

The usage then would be very simple:

// remember to add ui.bootstrap module dependency
angular.module('myModule', ['ui.bootstrap']); 

angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "$modal", "dataService", function ($rootScope, $scope, $filter, $modal, dataService) {

    $scope.checkItem = "";

    $scope.loadEditForm = function () {
        $scope.checkItem = "yes";
        $modal.open({
            templateUrl: 'modal.html',
            controller: 'modalController',
            scope: $scope
        });
    };

}]);

Demo: http://plnkr.co/edit/kQz0fiaXLv7T37N8fzJU?p=preview

edited Mar 20, 2015 at 8:34

answered Mar 20, 2015 at 8:19

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

codegrid Over a year ago

what js file does ui.bootstrap reference?

dfsq Over a year ago

Check updated answer, I added demo of how you should configure everything.

codegrid Over a year ago

Hello @dfsq I forgot to include I am using .net MVC. How do I call partial views in templateUrl?

dfsq Over a year ago

Not .NET expert, so can't answer this question. But you need to provide an URL for downloadble resource. Meaning that if you go in browser to this url it downloads template HTML file.

Ramesh Rajendran · Accepted Answer · 2015-03-20 08:37:46Z

2

You need to assign ng-controller in your modal-dialog div tag.

<div class="modal-dialog" **ng-controller="myController"**>
.
.
.
.
.

Update

I think you got this below error in your console window

Module 'myModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

So please change nangular.module('myModule') to angular.module('myModule',[])

try this below js code instead of your code with my above changes

angular.module('myModule',[]).controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) {

    $scope.checkItem = "";

    $scope.loadEditForm = function () {
        $scope.checkItem = "yes";
        $("#modal-form-edit").modal();
    };


}]);

edited Mar 20, 2015 at 8:37

answered Mar 20, 2015 at 8:08

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

1 Comment

Ramesh Rajendran Over a year ago

i think you got any console error, please verify it

Krishna · Accepted Answer · 2017-05-31 10:27:21Z

0

It is possible that your modal (e.g - bootstrap modal ) might be outside of the ng-controller directive

answered May 31, 2017 at 10:27

Krishna

214 bronze badges

Collectives™ on Stack Overflow

Scope binding not working in modal popup angularjs

3 Answers 3

4 Comments

Update

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Update

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest