1

This it would be my directive

I try to add click events in the link function for my directive when it initiates, but it gives me empty element when I try to get the elements.

var link = function(scope, elem, attrs, controller){

        console.log('WidgetId:' + controller.widget);

        //Not working, 
        angular.element(elem[0].querySelectorAll('.widget-btn')).on('click', function(){
            console.log('click event with querySelector');
        });

        // Directive element DOM
        console.log(elem);

        // That call return empty array, the PROBLEM is here
        console.log(elem[0].querySelectorAll('.widget-btn'));

        elem.on('click', function(e){
            // But when I click in the directive, it returns the elements that I want
            console.log(angular.element(elem[0].querySelectorAll('.widget-btn')));
        });

        scope.$on(scope.widget, function(){
            console.log('directive get the controller message');
        });

        var widgetId = controller.widget;

        function socketInit(){
            socket.forward(widgetId, scope);
            scope.$on('socket:'+ widgetId, function(){
                console.log('Get socket msg');
            });
        };

        socketInit();

    }

    return {
        restrict: 'EA',
        controller: controller,
        // Our controller $scope will change for vm
        controllerAs: 'vm',
        // We set our widget info in the datasource.
        scope: {
            // After the configuration our datasource is accesible in the vm.datasource
            datasource: '=',
            addchanneluser: '&',
            widget: '@'
        },
        bindToController: true,
        templateUrl: '/angular-js/views/dashboard/directives/small/small.template.html',
        link: link,
    }

console.log(elem), it gives me directive element DOM so what I want to do is find in that DOM, all the elements that has channel class. I execute with querySelector and it gives me empty array.

But when all the directive its charge in the browser and I click in the directive console call is with content.

My questions is, it can be some initialisation problem or querySelector is charged after the link function.

Thanks

DustInTheSilence
  • 575
  • 1
  • 7
  • 15
  • It would be nice to see the full directive code _and_ some test markup. It hard just to _guess_ what is wrong here :) – davidkonrad Dec 07 '15 at 10:20
  • Thanks @davidkonrad, here you have the link and return code! – DustInTheSilence Dec 07 '15 at 10:38
  • why `**var** link =`? And do you have a `return { link: link }` in the directive? – davidkonrad Dec 07 '15 at 11:04
  • Like this, I create link function and after I add in the link option the link variable. But the problem is, why I cannot access to querySelector in that place and after when I click in the directive returns with all the values the querySelector – DustInTheSilence Dec 07 '15 at 11:10
  • I just realize that in my template using ng-repeat directive, that why is giving me empty array. Why is it like this. How can I fix it? – DustInTheSilence Dec 07 '15 at 12:33

0 Answers0