Decorating directive with unnamed link function

Question

How can one derocate directive if link function is not named. More specifically I want to decorate select-ui directive. This is how their directive is defined:

.directive('uiSelect', function() {
    return {
             restrict: 'EA',
             scope: true,
             compile: function(tElement, tAttrs) {
                 //some code
                 return function(scope, element, attrs, ctrls){
                      //some code here
                      //how do I extend this?
                 }
             }
    }

});

This is how I tried, but it's giving me error Cannot read property 'apply' of undefined, because link function is not named in directive :

.decorator('uiSelectDirective', function($delegate, Restangular){
    var directive;
    directive = $delegate[0];
    console.log(directive, $delegate);
    directive.scope = {
        endpoint: '=',
        items: '=',
        parameters: '='
    };
    directive.compile = function() {
        return function($scope, element, attrs){
            directive.link.apply(this, arguments);
            // custom code here
        }
    };
    return $delegate;
});

EDIT

I tried the suggested approach, but i'm running into issues.

.decorator('uiSelectDirective', function($delegate, Restangular){
    var directive;
    directive = $delegate[0];
    directive.scope = {
        endpoint: '=',
        items: '=',
        parameters: '='
    };


    directive.compile = function(originalCompile) {
        var args = arguments;
        return function($scope, element, attrs){
            console.log($scope); // this here is returning element instead of scope?
            return originalCompile.apply(this, args);

        }
    }(directive.compile);


    return $delegate;
});

Instead of $scope I'm getting element variable ([div.ui-select-container.ui-select-bootstrap.dropdown]). I also have error saying that tAttrs is not defined, which is the parameter in main compule function. I'm guessing that apply isn't passing arguments into function somehow...

Answer 1

Do something this like this to extend compile function:

directive.compile = function(originalCompile) {
  return function() {
    var oldLink = originalCompile.apply(this, arguments);

    return function($scope, element, attrs) {
      // custom code for link here
      return oldLink.apply(this, arguments)
    }
  }
}(directive.compile);