指令link（）querySelector

Question

This it would be my directive

我尝试在启动时在我的指令的链接函数中添加click事件，但是当我尝试获取元素时它给了我空元素。

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），它给了我指令元素DOM所以我想做的是在那个DOM中找到所有具有通道类的元素。我使用querySelector执行它，它给我空数组。

但是当所有指令在浏览器中充电并且我在指令控制台中点击时调用内容。

我的问题是，它可能是一些初始化问题，或者在链接功能之后收取querySelector。

由于