我有一个由 2 个指令组成的 super 指令。第二个“子”指令是一个添加新的打开对话框控件:
这是骗子:
<强> http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB
如果您检查 super 指令“selectAddNew”,从底部数第三行,您将看到以下代码:
<div txt-add-new text="{{text}}" action="openDialog(\'Front\')" style="display: inline-block"></div>
问题是 action="openDialog(\'Front\')" 是硬编码的。
super 指令的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 控制台中查看代码时,我发现自己陷入了无限循环
最佳答案
标记我解决了它,代码如下:
<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>'
};
关于AngularJS - 在 super 指令中创建动态 Action ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16254239/