Passing parent controller to modal (Angular-ui bootstrap)

Question

I feel like this should work, but it's not. I want to be able to pass the controller that is opening the modal so I can use its submit function etc. I am using the controllerAs pattern (so not using $scope).

var _this = this;

this.openModal = function(modalId,dataIn){
    this.modalInstance = $modal.open({
        templateUrl: modalId,
        controller: 'ModalCtrl',
        controllerAs: 'modal',
        resolve: {
            modalObject: function(){
                return dataIn;
            },
            title: function(){
                return 'Training Info';
            },
            parent: function(){
                return _this
            }
        }
    });

    _this.modalInstance.result.then(function (data) {
        $log.log('submitting data for '+_this.doctorId);
        experienceFactory.submitTraining(data).then(function(){
            loadExperience();
        },function(error){
            console.log(error);
        });
    }, function () {
        //something on close
        $log.info('Modal dismissed at: ' + new Date());
    });
};

this.something = function(){
    $log.warn('omg it workt?');
};

That is opened up with a simple aCtrl.openModal('a-modal',aCtrl.data) however for some reason I can't access the parent controller

<script type="text/ng-template" id="a-modal">
    <div class="modal-header">
        <h3 class="modal-title">{{modal.title}}</h3>
    </div>
    <div class="modal-body">
        <button ng-click="parent.something()">Something</button>
    </div>
</script>

The button does nothing, but should be printing the warnings. Any ideas appreciated. Thanks.

user3707125 · Accepted Answer · 2015-05-28 00:23:34Z

1

Unfortunately you didn't include the code of your controller, however I think that you misunderstood how dependencies are provided to the modal's controller.

The resolve part provides dependencies to the controller, it neither binds them to the scope nor to the controller. Take a look at this JS part of UI-Bootstrap's Modal example:

.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
    $scope.items = items;

In your case it should be

.controller('ModalCtrl', ['parent', function (parent) {
    this.parent = parent;

And in HTML, if you are using controllerAs pattern:

 <button ng-click="modal.parent.something()">Something</button>

answered May 28, 2015 at 0:23

user3707125

3,48916 silver badges23 bronze badges

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

1 Comment

Z2VvZ3Vp Over a year ago

Yes. This was the issue. I was just about to return here to post that. I ended up doing effectively what you're doing. Thanks.

Collectives™ on Stack Overflow

Passing parent controller to modal (Angular-ui bootstrap)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related