javascript - 反腐败层从 Angular 元素指令传递属性指令

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>

为了简单起见，我暂时不担心嵌入或选择的选项，我只想知道如何将属性指令绑定(bind)到包装指令。

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