问题描述
限时送ChatGPT账号..我正在开发一个项目,以使用特殊的 XML 作为输入来呈现 HTML.我已经在基本案例中取得了成功.例如:
I'm working on a project to render HTML taking a special XML as input. I succeed already with the basic case. For example:
<mybutton name="layla"></mybutton>
转换为
<div class="btn">Layla</div>
使用类似的指令
.directive('mybutton', function() {
return {
restrict: 'E',
scope: {
name: '@'
},
templateUrl: 'uicomponents/uiButton.html'
}
})
我将收到的真正 XML 输入是:
The real XML input I'll receive is:
<ui type="back_button" x="10.0" y="630.0"/>
我想避免更改 XML 语法,但可以在必要时完成.所有屏幕组件都在
标签中.type
属性定义了组件.
I'd like to avoid changing the XML syntax but it can be done if necessary.
all screen components are in <ui></ui>
tags. The type
attribute defines the component.
您将如何为此类标签编写指令?为 <ui>
元素创建一个巨大的指令并在内部为属性设置一个长的 switch-case 似乎并不明智.
How would you write directives for this kind of tags? It doesn't seem smart to create one huge directive for <ui>
elements and having a long switch-case inside for the attribute.
推荐答案
你可以创建一个 ui 指令,根据 type 属性转换元素,然后重新编译元素 - 像这样:
You could create a ui directive that transforms the element based on the type attribute and then recompiles the element - something like this:
app.directive('ui',function($compile){
return {
restrict:'E',
compile:function(tElement,tAttrs){
if(tAttrs.type){
tElement.attr(tAttrs.type,'');
tElement.removeAttr('type');
return function(scope,el){
$compile(el)(scope);
}
}
}
}
});
app.directive('backButton',function(){
return {
replace:true,
template:'<button ng-click="btnClick()">A back-button template</button>'
}
});
在我的原始示例中,我犯了编译模板元素的错误 - 如果在 ngRepeat 中使用了该指令,则这将不起作用.修复很简单,而是编译链接元素.我已经更新了代码和示例.
In my original example I made the mistake of compiling the template element - this will not work if the directive is being used in a ngRepeat. The fix is simple, compile the link element instead. I've updated the code and the example.
查看这个plnkr示例.
这篇关于具有特定类型的通用指令(UI 组件继承)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论