Calling parent scope function from directive

Question

I am creating a directive that opens an angular bootstrap UI modal window. When closing the modal i would like to have a function executed that is passed from the attribute on the directive.. Here is what i have so far:

This is on the index.tpl.html :

<popup class="something" .. on-close="update()"></popup>

Directive code, only scope definition since there is a lot of code prior to this:

scope: {
         onClose: "&"
       },
link: function(scope, element, attr){
          //some code    
          ......
          scope.closeFn = function(){
               scope.onClose();
         }
         //opening of the modal:
         var modalInstance = $modal.open({
                   ....
                   templateUrl: 'path/to/template.tpl.html,
                   controller: 'PopupController',
                   scope: scope,
                   ....
         });

In the template of the popup i have a function binded to a close button that calls a function in the 'PopupController' that calls the closeFn from the directive link function like so.

<button type="button" class="btn-close btn btn-large" ng-click="closePopup()">Close
    </button>

And in the 'PopupController' :

$scope.closeUploadPopup = function () {
        $scope.$parent.closeFn();
        $modalInstance.close();
    };

As far as i understand the scope.onClose() should execute the function specified by the on-close attribute?

I have not provided a lot of code since there is a lot of the original code, but i can add more if it helps.

dfsq · Accepted Answer · 2015-12-29 18:39:27Z

1

You need to use proper API $modal service provides. Thus, modalInstance has a property promise which you can use to "subscribe" to get notified when popup closed ("Ok" button) or dismissed ("Cancel" button).

scope: {
    onClose: "&"
},
link: function(scope, element, attr) {
    // ... some code       
    var modalInstance = $modal.open({
        // ....
        templateUrl: 'path/to/template.tpl.html',
        controller: 'PopupController',
        scope: scope,
        // ....
    });

    modalInstance.result.then(function() {
        scope.onClose(); // close handler
    }, function() {
        // dismiss handler
    });

};

And in popup template use $close and $dismiss methods:

<button type="button" class="btn-close btn btn-large" ng-click="$close()">Close</button>

answered Dec 29, 2015 at 18:39

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

Loshmeey Over a year ago

Hi, and thank you for the kind reply! I have tried calling the function on the result promise, but still it seems that the parent function is not being called. I have tried debugging a bit, and this is what i have stumbled upon destination[scopeName] = function(locals) { return parentGet(scope, locals); }; From the angular source code Where locals is undefined. Could it be that i am binding the function call in the wrong way?

dfsq Over a year ago

It should work: plnkr.co/edit/QYC7gfbk45x6rLkZASdi?p=info Try to update this demo with your code and see if you can provide a demo with the issue.

Pankaj Parkar · Accepted Answer · 2015-12-29 18:41:21Z

1

As you are assigning new controller to your modal popup, there is no need to assign scope property, which is anyway going to be ignored.

For make it working I'd suggest you to pass that method reference from the resolve of your modal popup

var modalInstance = $modal.open({
    templateUrl: 'path/to/template.tpl.html',
    controller: 'PopupController',
    resolve: {
        onClose: scope.onClose
    },
    //....
});

Controller

app.controller('PopupController', function($scope, onClose){
    $scope.closeUploadPopup = function () {
        onClose();
        $modalInstance.close();
    };
})

answered Dec 29, 2015 at 18:41

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

Loshmeey Over a year ago

Hi and thank you for the reply! Unfortunately with this solution i am experiencing the same behaviour as with the resopnse by @dfsq. I have mentioned a possible problem in the comment to his reply, do you think that i could be related?

Yogesh · Accepted Answer · 2015-12-29 18:55:55Z

1

May be this dialog directive can help you.

You can customize 1. The dialog title 2. The message body 3. button those are displayed on the dialog and the respective action

<ng-dialog button="Yes|okFunction ,No|cancelFunction" dialogid="id-bootstrap" header="Angular Modal Dialog Directive " message="Hello World" theme="bootstrap">
</ng-dialog>

The dialog box with two button 1) Yes and 2) No will be created. the okFunction and cancelFunction are be invoked on click event. These function are defined in the controller.

Please refer to the below link.

http://yogeshtutorials.blogspot.in/2015/12/angular-modal-dialog-directive.html

answered Dec 29, 2015 at 18:55

Yogesh

8131 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Calling parent scope function from directive

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related