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...
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);