重写Angular指令link

Override Angular Directive link

本文关键字：link 指令 Angular 重写      更新时间：2023-09-26

我对Angular的了解有限，所以请原谅我。我的情况是，我只能修改一个js文件，它包含在所有Angular的东西之前。有一个指令出现了问题，但是我不能直接修改。因此，我试图通过在文档就绪块中添加下面的代码片段来覆盖它:

app.directive('selectionChange', function($rootScope){
   return {
      priority: 1,
      terminal: true,
      link: function(scope, el, attr) {
         console.log('works');
      };
   };
});

我可以看到这个指令被添加到invokeQueue的末尾，但它从未被执行。我要怎么把这个连接起来?谢谢!

更新:

对不起，让我试着澄清一下。问题是，原始指令继续触发，但新附加的指令没有(通过使用console.log和alert进行测试)。标记是这样的:

<html>
<head>
...
<script src="[the file I can modify].js"></script>
...
</head>
<body>
...
<script src="angular.js"></script>
<script src="directives.js"></script> // here is where the existing selectionChange directive is defined
...
</body>
</html>

这是一个活塞

$(function () {
  var app = angular.module('app');
  app.config(function ($provide) {
    $provide.decorator('badDirective', function ($delegate) {
      var badDirective = $delegate[0];
      var link = function (scope, element) {
        element.text('good');
      }
      var originalCompile = badDirective.compile || function () {};
      badDirective.compile = function () {
        originalCompile.apply(badDirective, arguments);
        // compile returns link fn, directive 'link' property will be ignored anyway
        return link;
      }
      return $delegate;
    });    
  });
})

在"就绪"状态下做(例如jQuery ready实现)是正确的事情。这样，代码将在引导过程之前启动(一旦加载angular.js，它将通过ng-app在'ready'上排队)。

bad指令只是badDirective服务内部包含DDO数组(因为可以有几个具有相同名称的指令)。而且可以像其他服务一样进行装饰。

Link函数可以定义为link或compile(它可以返回Link) DDO属性。第二个会覆盖第一个，所以在修饰指令时始终坚持使用compile。

在文件中，你可以修改创建一个带有(引用/定义)的脚本标签到你的新指令，并将该标签放在正文的底部，就在有问题的指令定义之后。通过最后一个定义，你可以确保你的指令被渲染。

相关文章：