目标:连续运行 2 个指令,第二个指令将由第一个指令输出确定
问题:动态地进行。
我想制定一个核心指令,它将得到:
<div field-directive="textbox" field-model="SomeModel"/>
在核心指令中,我想使用模板返回类似的东西:
<div >
<div>
<div >
{{fieldModel.Title}}:
</div>
<div>
<div ng-model="fieldModel.Value" textbox />
</div>
</div>
</div>
问题是我无法弄清楚如何编写模板中textbox
的属性field-directive
的值,我需要它,因为我希望另一个指令在此指令的输出上运行。我的指令:
myapp.directive('fieldDirective', function()
{
replace : true,
scope : {
fieldModel: "=",
fieldDirective: "="
},
link: function (scope, element, attr) {
element.html(element.html().replace("field-directive", attr.fieldDirective));
}
template:
'<div ng-show="fieldModel.IsRelevant">
<div>
<div class="fieldTitle">
{{fieldModel.Title}}:
</div>
<div>
<div ng-model="fieldModel.Value" fieldDirective />
</div>
</div>
</div>';
}
只是为了其他人会遇到类似的问题:我的解决方案是将这些数据写入链接函数,然后像这样使用编译函数:
myapp.directive('fieldDirective',['$compile', function(compile)
{
return{
replace : true,
scope : {
fieldModel: "=",
fieldDirective: "="
},
link: function (scope, element, attr) {
var strTemplate =('<div ng-show="fieldModel.IsRelevant"><div><div class="fieldTitle">{{fieldModel.Title}}:</div><div><div ng-model="fieldModel.Value" placeHolder /></div></div></div>').replace("placeHolder", attr.fieldDirective);
var e = angular.element(strTemplate);
compile(e.contents())(scope);
element.replaceWith(e);
},
}
}]
);