Angular directive, trigger scope function

Question

I have a custom popup panel that I want to add functionality to close whenever the screen is clicked outside the panel. I created a directive to accomplish this, but I am having a hard time communicating that the close event happened.

<div ng-if="ui.showConfig" auto-hide="ui.showConfig=false">...</div>

JS

myApp.directive('autoHide',
    [function() {
        return {
            restrict: 'A',
            scope: {
              'autoHide': '&'
             },
            link: function (scope, element, attrs) {
                var $overlay = $("<div style='position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;'>");
                $overlay
                    .appendTo("body")
                    .one("click", function(e){ 
                        element.hide();
                        $overlay.unbind().remove(); 
                        // This is not firing...
                        // scope.autoHide(); 
                    });

                element.css("zIndex", "2001");

                element.on('$destroy', function() {
                    $overlay.unbind().remove();
                });
            }
        };
    }]);

Here is a jsfiddle

The overlay click event is firing. The panel is hiding. But ui.showConfig is not getting set to false causing the user to click the button twice to open up the panel next time.

Also, if there is another approach I should consider please let me know!

Can you post your code in plunker?

PSL
– PSL

2014-08-28 19:09:57 +00:00
Commented Aug 28, 2014 at 19:09 — PSL
– PSL, Commented Aug 28, 2014 at 19:09

a better oliver · Accepted Answer · 2014-08-28 20:17:36Z

1

Inside an event handler you need to call scope.$apply() so that angular gets informed about changes:

// This is not firing...
scope.autoHide(); 
scope.$apply();

answered Aug 28, 2014 at 20:17

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

Comments

vertazzar · Accepted Answer · 2014-08-28 19:23:35Z

0

i did try your jsfiddle and http://jsfiddle.net/yke1pm7g/1/ apparently the event fires, however i don't understand whats going on with scope.autoHide() ?

answered Aug 28, 2014 at 19:23

vertazzar

1,0637 silver badges10 bronze badges

Comments

Avag Sargsyan · Accepted Answer · 2016-10-25 15:08:27Z

0

I want to suggest you at the first do not use the jquery appending in DOM extra elements or something else, and also I want to suggest use already build angular bootstrap modal which will gave you more advantages. You can check the link and see the examples and how to include the module in your project. I'm pretty sure what the all functionality you need for popup bootstrap mpodal already has.

edited Oct 25, 2016 at 15:08

Avag Sargsyan

2,5194 gold badges33 silver badges45 bronze badges

answered Aug 28, 2014 at 19:10

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular directive, trigger scope function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related