User actioned link being treated as a popup and being blocked

Question

I read that if a user clicks a link, then you can use JavaScript to open it and it will not be blocked by a popup blocker. You can see that here:

Allow window.open to open new window and not popup

So, in angular, I created this directive:

.directive('kdExport', function () {

    return {
        restrict: 'A',
        scope: {
            options: '=kdExport'
        },
        controller: 'ExportImageController',
        link: function (scope, element, attrs, controller) {

            // Bind to the onclick event of our button
            element.bind('click', function (e) {

                // Prevent the default action
                e.preventDefault();

                // Copy our options
                angular.extend(controller.options, scope.options);

                // Generate the image
                controller.generateImage(function (preview) {

                    // Create our url
                    var url = '/kits/preview/' + preview.id;

                    // Open a new window
                    window.open(url, '_blank');
                });
            });
        }
    };
})

The problem is that it gets blocked in IE. How can I prevent IE from blocking this link?

Answer 1

Opening a popup after a user interaction (the click) must be done just after the event.

Here, you perform the window.open in a callback function in controller.generateImage.

Just try to move your code after your angular.extend, and it'll works perfectly.

[...]
link: function (scope, element, attrs, controller) {

        // Bind to the onclick event of our button
        element.bind('click', function (e) {

            // Prevent the default action
            e.preventDefault();

            // Copy our options
            angular.extend(controller.options, scope.options);

            // Open a new window here, not in a callback function
            window.open(url, '_blank');
        });
    }
[...]