使用未命名的 link 函数装饰指令

Question

如果 link 函数未命名，如何取消指令。更具体地说，我想修饰 select-ui 指令。他们的指令是这样定义的：

.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?
                 }
             }
    }

});

这是我尝试过的方法，但它给我错误 Cannot read property 'apply' of undefined，因为 link 函数未在指令中命名：

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

编辑

我尝试了建议的方法，但我运行遇到了问题。

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

而不是 $scope 我得到的是元素变量 ([div.ui-select-container.ui-select-bootstrap.dropdown])。我也有错误说 tAttrs 未定义，这是主要 compule 函数中的参数。我猜 apply 不会以某种方式将参数传递给函数...

Answer 1

做这样的事情来扩展编译功能：

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

使用未命名的 link 函数装饰指令

Decorating directive with unnamed link function

javascript

angularjs

angularjs-directive

angularjs-select2