AngularJS - 在超级指令中创建动态动作

2024-01-04

我有一个由 2 个指令组成的超级指令。第二个“子”指令是一个添加新的打开对话框控件:

这是笨蛋:

http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB

如果您检查超级指令“selectAddNew”,从底部第三行,您将看到以下代码:

 <div txt-add-new text="{{text}}" action="openDialog(\'Front\')" style="display: inline-block"></div>

问题是动作=“openDialog(\'前面\')”是硬编码的。

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>'
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS - 在超级指令中创建动态动作 的相关文章

随机推荐