如何进一步抽象具有过多重复逻辑的指令

How to further abstract directives that have too much duplicated logic

本文关键字：指令 进一步 抽象      更新时间：2023-09-26

我正在开发一个代码库，其中多个指令使用本质上重复的逻辑，只有一个对象通过范围更改传递。例如：

return {
        restrict: 'A',
        scope:{
            someObject:"="
        },
link: function( scope, element, attrs ) {
scope.getSomeObject = function(){
...
    return scope.someObject.$$getSomeObject;
...
}
scope.saveSomeObject = function(){
...
    scope.someObject.$$saveSomeObject();
...
}
scope.removeSomeObject = function(){
...
    scope.someObject.$$removeSomeObject();
...
}

}

每个函数的逻辑都比较复杂，但本质上就是我所展示的。一般来说，功能几乎完全相同，尽管偶尔会出现特殊情况。在我看来，指令的创建本质上是为了解决每次都必须编写此代码的问题，当发现错误时，必须在任何地方进行修复。指令还在各自的templateUrl中复制其逻辑的大部分（但不是全部）。写一次并反复用于各种对象/情况的最明智的方法是什么？

这看起来是使用"required"指令的完美用例。查看指令定义对象的"require"属性的文档。

例如，您可以定义一个名为someObject的指令，并在自定义指令中要求它。

<my-directive some-object="somethingOnParentScope"></my-directive>

在你的myDirective定义中，你会做一些类似的事情

return {
    restrict: 'A',
    require: 'someObject',

link: function( scope, element, attrs, someObjectCtrl ) {
  // if you need to make someObjectCtrl functionality available through templates, 
  // you will still need to add it to the scope
  scope.someFunction = someObjectCtrl.someFunction;
}

如果您的意思是要将通用代码从指令中提取到某个共享位置，我认为您应该开始使用服务。。然后将它们注入指令

相关文章：