How to pass input value to controller in Angular Modal service

Question

Using this angular modal service:

app.service('modalService', ['$modal',
    function ($modal) {

        var modalDefaults = {
            backdrop: true,
            keyboard: true,
            modalFade: true,
            templateUrl: '/templates/modal.html'
        };

        var modalOptions = {
            closeButtonText: 'Close',
            actionButtonText: 'OK',
            headerText: 'Proceed?',
            bodyText: 'Perform this action?'
        };

        this.showModal = function (customModalDefaults, customModalOptions) {
            if (!customModalDefaults) customModalDefaults = {};
            customModalDefaults.backdrop = 'static';
            return this.show(customModalDefaults, customModalOptions);
        };

        this.show = function (customModalDefaults, customModalOptions) {
            //Create temp objects to work with since we're in a singleton service
            var tempModalDefaults = {};
            var tempModalOptions = {};

            //Map angular-ui modal custom defaults to modal defaults defined in service
            angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

            //Map modal.html $scope custom properties to defaults defined in service
            angular.extend(tempModalOptions, modalOptions, customModalOptions);

            if (!tempModalDefaults.controller) {
                tempModalDefaults.controller = function ($scope, $modalInstance) {
                    $scope.modalOptions = tempModalOptions;
                    $scope.modalOptions.ok = function (result) {
                        $modalInstance.close(result);
                    };
                    $scope.modalOptions.close = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }
            }

            return $modal.open(tempModalDefaults).result;
        };

    }]);

I'm having trouble understanding how to pass values from the modal (which has an input) to the controller.

This is my modal:

<input type="text" class="form-control" id="{{modalOptions.inputName}}" name="{{modalOptions.inputName}}" data-ng-model="modalOptions.inputVal" data-ng-if="modalOptions.inputName"  />
<button type="button" class="btn"
            data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
<button class="btn btn-primary"
            data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>

Controller:

$scope.addTopic = function () {

        var modalOptions = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Create Topic',
            inputName: 'topicName'
        };

        modalService.showModal({}, modalOptions).then(function (result) {
            // I tried...
            var input = $scope.inputName; // and...
                input = result;
            $log.log("Adding topic '" + input + "' to publication no " + $scope.publication.id);
        });
    }

So the input is an option in modalOptions but when the user enters a value and clicks ok, nothing is sent to the controller. $scope.inputName returns undefined and so does result.

Ideally, I want to end up with an object like so { inputs : {name: 'inputName' , value: 'abcde'} }.

I have not used Wahlin's code before, but have you looked at Angular UI's Modal? They have a well documented (and functioning) method for doing this. — Cory Silva
– Cory Silva, Commented Nov 5, 2014 at 22:15
@CorySilva Whalin's looks like angular ui's modal as a service. I just can't get my head around passing the result to the controller with the modal is instantiated via a service. — greener
– greener, Commented Nov 5, 2014 at 22:17
My bad did not notice that at first look. Regardless of the nearly identical code :/ — Cory Silva
– Cory Silva, Commented Nov 5, 2014 at 22:40

Cory Silva · Accepted Answer · 2014-11-05 22:39:19Z

1

Try the resolve method in Angular UI Bootstrap

var modalOptions = {
    resolve: {
        myvar: function () {
            return $scope.myvar;
        }
    }
};

modalService.showModal(modalOptions);

answered Nov 5, 2014 at 22:39

Cory Silva

2,81119 silver badges23 bronze badges

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

1 Comment

greener Over a year ago

thanks. I think I found it: $modalInstance.close($scope.modalOptions.inputVal); in the service

Collectives™ on Stack Overflow

How to pass input value to controller in Angular Modal service

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related