Home In Angular 1.x how to handle event hooks being destroyed when parent component rerenders?
Reply: 0

In Angular 1.x how to handle event hooks being destroyed when parent component rerenders?

paulp
1#
paulp Published in 2017-11-14 16:13:37Z

I have an attribute directive called channelModal which is attached to a "product thumbnail" component, so that clicking the thumbnail displays a modal. These thumbnails live inside of a slick carousel. Whenever the carousel is resized, the .on('click) event which displays the modal is removed. This happens because the carousel removes and adds back it's elements during resizing. Is there a better place to set up the .on('click) event so that it doesn't unbind?

function channelModal() {

return {
    restrict: 'A',
    scope: {
        channel: '<'
    },
    controller: channelModalController,
    link: function(scope, element) {
        scope.initializeModal(element, template);                            
    }
};

function channelModalController($scope, $state, $templateCache, $compile, cache) {           
    $scope.initializeModal = function(element, template) {
        const self = this;
        locallyStoredTemplate = template;

        element.on('click', function (e) {
            if (angular.element('.modal').length <= 0) {
                angular.element('body').append('<div class="modal"></div>');
            }
            e.preventDefault();

            let $modal = angular.element('.modal');

            $modal.attr({
                tabindex: '-1',
                role: 'dialog',
                'aria-labeledby': 'modalLabel'
            });

            $scope.$apply(() => {
                let modalBody = $compile(angular.element(self.getTemplate(template)))($scope);

                $modal.html('').append(modalBody);
                $modal.modal({
                    keyboard: true,
                    backdrop: true
                });
            });
        });
    };

HTML

<div sf-unentitled-channel-modal       
     class="modal-container"
     channel="$ctrl.channel"></div>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.307771 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO