嵌套角度指令中的相同函数名称

时间:2017-05-08 10:43:10

标签: angularjs

我正在使用隔离范围嵌套Angular指令。在两个指令中,我使用的是常见的onchange函数。当我调用child指令的onchange函数时,会调用父指令对应的控制器onchange函数。这些功能通过'&'传递。我猜这种情况正在发生,因为'&'调用父作用域的函数,并且该指令具有相同的父作用域。 我们可以阻止这种情况发生吗?

<radio-content on-change="runTypeChange()">
<label class="tk-labl" for="firstNameId_input">time address</label>
<select id="scheduleStartTimeOptionsSelecdt" item-list="scheduleStartTimeOptions" selected-value="scheduleStartTimeOptions[1]"></uitk:select>

Radicontent指令:

radioGroupApp
.directive('radio', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            itemList: '=',
            groupName: '@',
            modelValue: '=',
            tkDescribedby: '@',
            tkLabelledby: '@',
            onChange: '&onChange',
        },
        transclude: true,
        template: "<div><div role='group'" +
        "<ul class='tk-form-radio'>" +
        "<li ng-repeat='item in itemList' class='template-list-item'>" +
        "<input type='radio' id='{{groupName + $index }}' ng-change='onnChange();'  name='{{groupName}}' ng-model='$parent.modelValue'" +
        "ng-disabled='item.disabled'   ng-attr-aria-disabled='{{item.disabled?true:undefined}}' ng-value='{{$index}}'/> " +
        "<label for='{{groupName + $index }}' tabindex='-1'>{{item.label | translate}}</label>" +
        "</li>" +
        "</ul></div></div>",
        }



  var SelectDirective = function (uitkExceptionService) {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,

        scope: {
            itemList: '=', //array of items
            selectedValue: '=', //model data for selected item
            tkRequired: '@',     //make select element required if any value is defined except 0 string
            tkErrorClass: '=',
            onChange: '&',
            tkName:'@',//name attribute needs to be on template for it to be rendered into form elements.
            checkFieldValidation: '=?' // used to set required attributes programmatically
        },
        template: function (ele,attr) {

            if (!attr.name) {//support for fomr layuout..name attr cannot be transcluded.
                return "<select ng-model='selectedValue'  ng-change='onChange({selectedValue: selectedValue})'  class='tk-sngl-dpwn' ng-style=\"{'width': 'auto'}\" ng-options='item.label disable when item.isDisabled for item in itemList' ng-attr-aria-invalid='{{tkErrorClass === undefined ? false : tkErrorClass}}' ng-required='(tkRequired && checkFieldValidation) ? true : false' aria-required='{{(tkRequired ) ? true : false}}'>" +
                 "</select>"
            }
           return "<select ng-cloak ng-model='selectedValue' ng-change='onChange({selectedValue: selectedValue})'  class='tk-sngl-dpwn' ng-style=\"{'width': 'auto'}\" ng-options='item.label disable when item.isDisabled for item in itemList' ng-attr-aria-invalid='{{tkErrorClass === undefined ? false : tkErrorClass}}' ng-required='(tkRequired && checkFieldValidation) ? true : false' aria-required='{{(tkRequired ) ? true : false}}'>" +
        "</select>"

        }
    };
};

0 个答案:

没有答案