CODEWITHSUNDEEP
angularjs
Mark Bucknell
Mark Bucknell

Reputation: 447

Having trouble updating the scope of my modal after it has been created

I have created a modal window that appears after a user enters data into the form. The modal window, by default, has a loading icon that I want to disappear and be replaced with results that are returned from my service. The issue is that once I create the modal window I cannot update the scope in the modal to display the returned results.

searchCustomers.js

$app.directive('searchCustomers', function (CustomerService, $modal) {
    return function (scope, element, attrs) {
        element.bind("keyup", function (event) {
            if(event.keyCode == '9') {
                if(Object.keys(scope.customer).length >= 3){
                    console.log('Find the customers');

                    var modalInstance = $modal.open({
                        templateUrl: 'loading.html',
                        controller: 'ModalInstanceController'
                    });

                    modalInstance.result.then(function(){
                        scope.data = CustomerService.findAll();
                    })

                }

                event.preventDefault();
            }
        });
    };
});

Customers Form

<div class="row">
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>Title</label>
                                <input type="text" class="form-control" required="" ng-model="customer.title" search-customers="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>First Name</label>
                                <input type="text" class="form-control" required="" ng-model="customer.firstName" search-customers="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>Surname</label>
                                <input type="text" class="form-control" required="" ng-model="customer.surname" search-customers="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>Company Name</label>
                                <input type="text" class="form-control" required="" ng-model="customer.company" search-customers="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>D.O.B</label>
                                <input type="text" class="form-control" required="" ng-model="customer.dob">
                            </div>
                        </div>
                    </div>

ModalInstanceController.js

$app.controller('ModalInstanceController', function ($scope, $modalInstance) {

    $scope.title = 'title here';
    $scope.message = '';
    $scope.data = '';

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

Loading.html

<div class="modal-header">
        <h3 class="modal-title">{{title}}</h3>
    </div>
    <div class="modal-body">
        <div class="text-center">
            <div class="progress-circle-indeterminate m-t-45"></div>

                <div class="small-text">{{ data }}</div>

        </div>
    </div>
    <div class="modal-footer">
    </div>

Upvotes: 0

Views: 43

Answers (1)

huan feng
huan feng

Reputation: 8623

modalInstance.result.then

will be invoked after you close the dialog, apparently it is not correct here. If you want to pass the query data into the new dialog, you should code like 

$scope.addLoadGenerator = function() {
    var modalInstance = $modal.open({
        templateUrl: 'loading.html',
        controller: 'ModalInstanceController',
        resolve: {
            newDialogData: function() {
                return CustomerService.findAll();;
            }
        }
    });

and in you modal dialog to get the data:

$app.controller('ModalInstanceController', ['$scope', '$modalInstance', 'newDialogData', function ($scope, $modalInstance, newDialogData) {
   ...
}]);

Upvotes: 1

Related Questions