uib-tabset killing the scope of my input change directive

Question

Had a uib-tabset and a directive that wait for a change on an input inside the uib-tabset, this directive is reached but when it has to fire a scope.$broadcast this don't call the function.

View

  <uib-tabset active="active">
     <uib-tab>
       <input type="file" class="upload" share-all="" accept="image/*">

Service/Directive

.directive('shareAll', [function() {
    return {
        restrict: 'A',
         link: function(scope, elem, attr) {
           $(elem).on('change', function(event) {
            return scope.$broadcast('shareIt', elem);
            }
        }
    }
});

Controller

$scope.$on('shareIt', function(event, file) {
});

I saw this ( https://github.com/angular-ui/bootstrap/issues/1553 ) but understood nothing at all, and this is killing me slowly.

Some thoughts?

Answer 1

I don't think you need that jQuery $ object, elem is already a jqLite object (unless you have jQuery, then elem is already an alias for $ ).

you also didn't closed your functions right.

app.directive('shareAll', [function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.on('change', function(event) {
                return scope.$broadcast('shareIt', elem);
            })
        }
    }
}]);

Here's a demo plunk