Question

在我的应用程序中，我必须切换选择框库，我有理由认为将来我必须再次使用。处理此类事情的标准方法是通过创建自己的包装器来实现反腐败层，以便您可以修改单个点以获取新功能。

我无法弄清楚如何使用angular来做到这一点，因为放在我的指令上的属性指令必须传递给它正在包装的指令。

所以我想做这样的事情：

<my-selectbox ng-model="foo" ng-required ng-class="{foo: bar}">
</my-selectbox>

并创建类似

的内容

<my-selectbox>
    <select ng-model="foo" ng-required ng-class="{foo: bar}">
        ....
    </select>
</my-selectbox>

为了简单起见，我现在不担心translude或者select的选项，我只想知道如何将属性指令绑定到wrapped指令。

Answer 1

由于replace已被弃用，我建议您不要使用ng-属性，尤其是ng-class，而应使用您自己的属性前缀。

这是一种理论方法，可将任何属性解析为template指令函数。属性解析器将my前缀替换为ng前缀

app.directive('mySelectbox', function() {

  function parseAttributes(att) {
    var res = [];
    for (var i = 0; i < att.length; i++) {
      var name = att[i].nodeName.replace('my', 'ng');
      res.push(name + '="' + att[i].nodeValue + '"');
    }
    return res.join(' ');
  }

  return {
    template: function(el, attrs) {
      return '<select '+parseAttributes(el[0].attributes) +'></select>';          
    }
  }

});

HTML

<my-selectbox 
      my-model="active" 
      my-required 
      my-class="{foo: bar}" 
      my-options="item for item in items"></my-selectbox>

可生产

<select ng-model="active" 
        ng-required="" 
        ng-class="{foo: bar}" 
        ng-options="item for item in items" ></select>

元素上留下的属性不会被任何核心指令操纵，因为它们不是基于ng-的。

这也可以使用$compile和replaceWith()或使用require:'^ngModel来完成，但因为我从未编写过属性解析器，所以我想尝试在模板函数中执行此操作，因为整个模板并不复杂

的 DEMO

从angular元素指令传递属性指令的反腐败层

1 个答案: