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

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

angularjs

AngularJS-在超级指令中创建动态动作,angularjs,Angularjs,我有一个由2个指令组成的超级指令。第二个“child”指令是添加新的打开对话框控件： open-dialog="openDialog('Front')" .directive('', function(){ .......... scope: { open-dialog: "&" }, ...... }, template: ..... '<div

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

open-dialog="openDialog('Front')"

    .directive('', function(){
        ..........
        scope: {
        open-dialog: "&"
    },
        ......      
    },
    template: .....
             '<div txt-add-new text="{{text}}" action="openDialog()" style="display: inline-block">
             ......
 };

     <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>'
};

这是普朗克：

如果检查超级指令“selectAddNew”（底部第三行），您将看到以下代码：

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

最初我尝试了这个（使之成为一个方法操作）：

open-dialog="openDialog('Front')"

    .directive('', function(){
        ..........
        scope: {
        open-dialog: "&"
    },
        ......      
    },
    template: .....
             '<div txt-add-new text="{{text}}" action="openDialog()" style="display: inline-block">
             ......
 };

     <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>'
};

在我的指令中使用此命令：

open-dialog="openDialog('Front')"

    .directive('', function(){
        ..........
        scope: {
        open-dialog: "&"
    },
        ......      
    },
    template: .....
             '<div txt-add-new text="{{text}}" action="openDialog()" style="display: inline-block">
             ......
 };

     <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>'
};

指令（“”，函数（）{ .......... 范围：{ 打开对话框：“&” }, ...... }, 模板：。。。。。 ' ...... };

但是当我在Chrome控制台中查看代码时，我发现自己陷入了一个无休止的循环中。标记我解决了它，代码如下：

open-dialog="openDialog('Front')"

    .directive('', function(){
        ..........
        scope: {
        open-dialog: "&"
    },
        ......      
    },
    template: .....
             '<div txt-add-new text="{{text}}" action="openDialog()" style="display: inline-block">
             ......
 };

     <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>'
};


.指令（'selectAddNew'，函数（）{
返回{
替换：正确，
限制：“E”，
范围：{
选择模型：“=”，
选择选项：“=”，
标签名：“@”，
预选筛选器：“@”，
选择短语：“@”，
正文：“@”，
},
编译：函数（远程通讯、属性）{
var div=tElement.find（'#ctrlId'）；
div.attr（'ng-controller'，attrs.varCtrl）；
var div2=tElement.find（“#OpenWindow”）；
div2.attr（'action'，attrs.dialogParam）；
},
模板：“”
“{{labelName}}:”+
'' +
'' +
'' +
'' +
''
};

哪里定义了

openDialog（）

指令

txtAddNew

使用

，这意味着它试图调用分配给父作用域上的属性

操作的表达式。我想（不确定）必须在与指令selectAddNew
关联的作用域上定义名为openDialog
的方法才能起作用。除非您使用$parent.$parent
或其他方法。它是在AxlesCtrl中定义的，我试图在Plunker中发布该snipet，但由于它依赖于外部代码，所以我得到了脚本错误。我们是否可以是否该方法存在于其他地方并且有效？我只想传递一个动态参数。openDialog是来自第三方脚本的方法调用。