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

Question

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

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

}

每个函数的逻辑都比较复杂，但本质上是我所展示的。通常，功能几乎完全相同，尽管偶尔会出现特殊情况。在我看来，指令的创建本质上似乎是为了解决每次都必须编写这段代码的问题，并且当发现错误时，必须在所有地方修复它。这些指令还在各自的 templateUrls 中复制了大部分（但不是全部）逻辑。什么是最明智的方式来写一次并一遍又一遍地用于各种object/cases？

Answer 1

如果你的意思是你想从指令中提取公共代码到一些共享的地方，我认为你应该开始使用服务..然后将它们注入你的指令

Answer 2

这看起来像是使用 '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;
}

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

How to further abstract directives that have too much duplicated logic

javascript

oop

angularjs