我有一个超级指令,由2个指令组成。第二个“子”指令是一个新增的打开对话框控件:
以下是摘要:
http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB
如果检查超级指令“selectAddNew”,从底部开始第三行,您将看到以下代码:
<div txt-add-new text="{{text}}" action="openDialog(\'Front\')" style="display: inline-block"></div>
问题是 action =“openDialog(\'Front \')”是硬编码的。
超级指令的html是这样的:
<select-add-new select-model="$parent.selectedFrontAxle" text="add new"
select-phrase="Front Axle Type" preselected-filter="Front"
label-name="Front Axle" open-dialog="Front" <------ need to pass this value
select-options="axleTypes" var-ctrl="AxleTypesCtrl"></select-add-new>
我可以使用OpenDialog方法,如果我也有,但是参数''Front \',需要从上面的Html部分得到它的值:
open-dialog="Front"
最初我尝试了这个(将其作为方法操作):
open-dialog="openDialog('Front')"
在我的指令中有这个:
.directive('', function(){
..........
scope: {
open-dialog: "&"
},
......
},
template: .....
'<div txt-add-new text="{{text}}" action="openDialog()" style="display: inline-block">
......
};
但在Chrome控制台中查看代码时,我发现自己处于无休止的循环中
答案 0 :(得分:3)
马克我解决了它,代码如下:
<select-add-new select-model="$parent.selectedFrontAxle" text="add new"
select-phrase="Front Axle Type" preselected-filter="Front"
label-name="Front Axle" dialog-param="openDialog('Front')"
select-options="axleTypes" var-ctrl="AxleTypesCtrl"></select-add-new>
.directive('selectAddNew', function () {
return {
replace: true,
restrict: "E",
scope: {
selectModel: "=",
selectOptions:"=",
labelName: "@",
preselectedFilter: "@",
selectPhrase: "@",
text: "@",
},
compile: function(tElement, attrs) {
var div = tElement.find('#ctrlId');
div.attr('ng-controller', attrs.varCtrl);
var div2 = tElement.find('#OpenWindow');
div2.attr('action', attrs.dialogParam);
},
template: '<div>' +
'<div class="local-label">{{labelName}}: </div>' +
'<name-value-select-control select-phrase="{{selectPhrase}}" selected-item="selectModel" preselected-filter="{{preselectedFilter}}" options="selectOptions"></name-value-select-control>' +
'<div id="ctrlId">' +
'<div id="OpenWindow" txt-add-new text="{{text}}" style="display: inline-block"></div>' +
'</div>' +
'</div>'
};