AngularJS - 创建超级指令动力作用

问题描述

我有由2个指令的超指令。第二个孩子指令是一个附加新打开的对话​​框控件：

下面是plunker：

Here is the plunker:

http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB

如果您检查超级指令selectAddNew，倒数第三行，你会看到这个code：

If you examine the super directive "selectAddNew", third line from the bottom, you will see this code:

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

问题是，行动=openDialog（\\'前\\'）很难codeD。

超级指令的HTML是这样的：

The super directive's html is this:

  <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生活，如果我有太多，但paramater \\'前\\'，需要得到它从HTML的这部分输入的值：

I can live with the method OpenDialog, if I have too, but the paramater \'Front\', needs to get it's value from this part of the Html above:

          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控制台

But I found myself in an endless loop when reviewing the code in Chrome console

推荐答案

标记我解决了它，code如下：

     <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 - 创建超级指令动力作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！