angular accessing modal parent controller

Question

I'm using ui-router with $modal and my set up is like this in my routing page:

.state('resourcesControl.resource.dataStuff', {
        url: "/:resourceId/dataStuff",
        onEnter: ['$stateParams', '$state', '$modal', '$timeout', 'resourceService', function($stateParams, $state, $modal, $timeout, resourceService){

            var modalInst = $modal.open({
                templateUrl: "templates/dataStuff.html",
                windowClass: 'data-modal',
                controller: 'dataStuffCtrl'
            });

            modalInst.result.then(function(){

            }, function(){
                $state.go('resourcesControl.resource');
            });
        }]
    })

My understanding with UI router is that all the child states have access to their parents controller and scope variables. In theory my dataStuffCtrl should have access to resource and resourcesControl controllers and their scopes.

However, when I wrap curly brackets around a parent scope item in the dataStuff view, nothing renders. Is there a way around this? I remember seeing other people posting about parent controllers with $modal but I can't find them on SO atm.

David Beech David Beech · Accepted Answer · 2014-09-19T22:54:54

The issue is that the $modal service adds the element to the end of the document. So it doesn't sit in you scope hierarchy and instead is only a child of the $rootScope. You have a couple of options.

Pass the data to the modals controller via the $rootScope or broadcast/emit events (messy)
Manually pass the modal the scope you want to use as part of the modal.open options object via the scope property. (You can call $scope.$new() to manually create a child scope).
Use the resolve property of the modal.open options object to pass the data to be injected into the modals controller just like angular route resolves

angular accessing modal parent controller

1 Answers