在我的应用程序中,我必须切换选择框库,并且我有理由认为将来我必须再次这样做。处理此类事情的标准方法是通过创建自己的包装器来建立反腐败层,以便您可以修改单个点以获得新功能。
但是,我不太清楚如何使用 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)到包装指令。
最佳答案
由于 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
来完成,但因为我从未写过属性解析器我想尝试在模板函数中执行它,因为整个模板并不复杂
关于javascript - 反腐败层从 Angular 元素指令传递属性指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35494337/