我正在使用隔离范围嵌套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>"
}
};
};