I am facing a strange issue within my AngularJS application. The error I'm encountering is the common $digest already in process error. Despite searching online and reviewing similar questions, none of the proposed solutions have resolved the issue.
The error specifically occurs in a child component. This child component essentially acts as a wrapper around a standard text input with some added styling. The ng-model of the child component is bound to the item passed into it. Additionally, the child component emits events when the input is either focused or blurred.
The hierarchy of components is structured as follows: There's a parent component functioning as a modal, and the child component comprises a text input. The parent component (modal) can be closed using the ESC key. The error arises when I open the modal, select the input (without entering any text), and then close it using the ESC key.
Below is the template for the child component:
<div class="input-group has-feedback"'
ng-class="{'has-error' : vm.item.errors.length > 0 ,
'has-success' : vm.item.isFulfilled}">
<div class="input-group-addon">
<i class="fa fa-asterisk"></i>
</div>
<input
ng-model="vm.item.pendingBarcode"
type="text"/>
</div>
Here is the JavaScript code for the child component:
.component('rfidInput', {
templateUrl:
'swipeables/templates/swipeables.rfidReader.tpl.html',
controllerAs: 'vm',
bindings: {
item: '<',
id: '<',
onFocus: '&',
onBlur: '&',
focus: '<'
},
controller: function() {
this.onInputFocus = function() {
if(typeof this.onFocus === 'function') {
this.onFocus({index:this.id})
}
}
this.onInputBlur = function() {
if(typeof this.onBlur === 'function') {
this.onBlur({item:this.item});
}
}
}
})
I simplified the child component's template to just include the ng-model, even though there are also bindings for ng-blur and
ng-focus</code, which I removed to pinpoint the source of the problem.</p>
<p>This is how the parent template utilizes the child template:</p>
<pre><code><rfid-input on-blur="fulfill(item)" focus="currentFocusedScanIndex"
on-focus="onScanFocus(index)" item="item" id="$index">
</rfid-input>
An interesting observation is that the error only occurs when I click into the input and then close the modal. If I open the modal but do not select the input before closing it, the error does not occur...
I am stuck and unsure of how to resolve this issue. I attempted using the $timeout solution to trigger onFocus and onBlur after a delay to prevent interference with the current $digest cycle.
Any assistance or suggestions on resolving this problem would be greatly appreciated. Additionally, any advice on improving the child component would be helpful as well.