Javascript 使用$PROFECT重命名第三方角度指令-不起作用

我已经在一个大型站点上使用了优秀的Angular UI引导程序，同时还有很多我自己的指令。为了整洁起见，我寻找了一种在不接触代码的情况下重命名两个uib指令的方法，并遇到了一些问题，这看起来是一个很好的解决方案。问题是它对我不起作用。这是我的密码

angular.module('s4p').config(function($provide, $compileProvider){

    console.log("I am logged in the console");

    $provide.decorator('uibPaginationDirective', function($delegate){

        console.log("I am not logged");

        $compileProvider.directive('s4pPaging', function(){
           return $delegate[0];
        });

        return function() { return angular.noop };

    });
});

我已经在那里放了几个console.log来看看它走了多远，我可以看到它甚至没有运行decorator。起初我认为这可能是uiPaginationDirective中的一个简单拼写错误，但如果我更改了一个字符，那么控制台中就会出现一个很大的注入器错误。因此，它肯定会找到原始指令，但装饰函数没有运行

我真的在做傻事吗

编辑：为了澄清，我使用ng annotate来简化依赖项注入，因此在.config（）中没有依赖项数组

编辑2：如果页面上没有使用该元素，装饰程序将不会运行，我没有意识到这一点。因此，如果您使用旧的元素，那么decorator会运行，但是如果您使用新的别名，那么什么也不会发生。我开始认为，我发现的这段代码可能永远不会工作，除非使用原始指令来启动装饰程序

编辑3：我为此增加了一笔赏金，因为找到解决方案会很好。即使没有人可以修复示例代码，也必须有其他方法在不更改第三方指令的情况下重命名该指令？我发现了一个名为“alias”的插件，它可以做到这一点，但我真的不想使用更多的第三方代码，我想了解解决方案

编辑4：我一直在使用我借来的代码，您可以在下面的plunkr中看到这些代码-我认为它只起作用，因为演示使用HTML中的原始指令，然后是重命名的指令。如果您从HTML中删除了原来的一个，那么它们都会消失。我认为这是因为指令装饰器仅在第一次使用该指令时运行。所以，我现在的任务是找到一种方法让decorator在不使用原始指令的情况下运行，或者寻找一种更好的方法来重命名第三方指令

编辑5：我尝试了另一种方法，这似乎就是alias插件在引擎盖下所做的

angular.module('s4p').directive('s4pPaging', function(){

    return {
        restrict: 'EA',
        replace: true,
        template: '<uib-pagination class="s4pPaging"></uib-pagination>'
    }

});

angular.module（'s4p'）。指令（'s4pPaging'，function（）{
返回{
限制：“EA”，
替换：正确，
模板：“”
}
});

…但不幸的是，我得到了以下错误

错误：[$compile:multidir]多个指令[s4pPaging（模块： s4p），uibPagination]请求在以下位置上创建模板：

我不明白他们为什么都要模板。我假设s4p分页将被uib分页替换，所有属性都复制到uib分页元素。显然，我不明白为什么像这样简单的东西不起作用。

试试这个：

var app = angular.module('plunker', ['ui.bootstrap', 'myDirectives']);

angular.module('myDirectives', [])
.directive('myPagination', function($injector) {
  return angular.copy($injector.get('uibPaginationDirective'))[0];
});

app.controller('PaginationDemoController', function($scope) {});

及

这项工作不必首先使用页面上的原始指令

请参见基于my的

，您需要在页面上至少使用一个指令实例，因为这是angular DI的工作方式。它只是在第一次使用任何工厂时才懒散地实例化它

正如我在前面的评论中提到的，您可以通过获取指令工厂（指令名称后缀为单词“directive”）

$injector.get（'directiveNameDirective'）

来获取任何指令配置

这里是一个解决问题的抽象（请记住，这将从原始线程中解决命名冲突问题，而且它更模块化，只需在应用程序中调用一个配置即可轻松设置）

你可以

您现在需要做的就是将此作为依赖项包含在模块中

 angular.module('plunker', ['renameDirectiveUtil']);

并通过提供格式为

{sourceDirectiveName:targetDirectiveName}

的配置对象对其进行配置

app.config(['renameDirectiveProvider',function(renameDirectiveProvider){
  renameDirectiveProvider.setConfig({
    'property' : 'cmProperty'
  });
}]);

---

出于好奇，

这里有一个$delegate[0]中有什么？我不确定。我从这个问题的答案中得到了代码-您可以通过执行

强制实例化它。run（['$injector'，function（$injector）{$injector.get（'propertyDirective'）；}]）。如果您愿意，我可以将其模块化为服务。@matmo它基本上返回指令配置，$delegate on a decorator是您正在装饰的工厂的实际定义。请参阅下面我的新答案。它工作正常，无需首先在页面上使用原始指令。嗯，不确定我做错了什么，但我得到了错误“错误：[$compile:multidir]多个指令[uibPagination，uibPagination]在上询问模板：好的，我发现了问题。我已经更改了分页模板，将s4p分页作为属性添加到模板中（想法是当作为属性使用时，指令应该限制为“E”，并且不编译，但原始版本可以作为属性使用）。现在可以使用了。非常感谢。
 angular.module('plunker', ['renameDirectiveUtil']);

app.config(['renameDirectiveProvider',function(renameDirectiveProvider){
  renameDirectiveProvider.setConfig({
    'property' : 'cmProperty'
  });
}]);