Question

93

Scope binding not working in modal popup angularjs

rated 0 times [ 95] [ 2] / answers: 1 / hits: 20421 / 9 Years ago, fri, march 20, 2015, 12:00:00

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

<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();

    };





}]);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

minab

Add To Favorites

Follow

Total Points: 701

Total Questions: 104

Total Answers: 91

Location: Saint Pierre and Miquelon

Member since Fri, Jan 28, 2022

2 Years ago

minab questions

1 Update a Table with React Hooks when a Row is Added, Deleted and Modified? [Issue: Gets Before Post and Delete]

Sat, Jul 10, 21, 00:00, 3 Years ago

1 How to click one button that exists two times with same name?

Fri, Feb 7, 20, 00:00, 4 Years ago

1 Unable to copy array using setstate hook

Tue, Oct 1, 19, 00:00, 5 Years ago

1 How to change day-format (M > Mo, F > Fr...) in Date/month pickers of Vuetify

Tue, Aug 20, 19, 00:00, 5 Years ago

1 Bootstrap Modal is not working in React JS

Thu, Jul 25, 19, 00:00, 5 Years ago

View All

answered 9 Years ago kenyamelinad · Accepted Answer

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