The ngModel controller did not trigger the $$updateEventHandler function

Question

The ngModel controller did not trigger the $$updateEventHandler function

Currently in the process of transitioning the development environment from gulp to webpack for a hybrid app that does not use AngularJS and React.

The application is quite large, currently consisting of 10mb worth of files.

However, I have encountered an issue. Specifically, this line within the main angular.js file:

this.$$updateEventHandler = this.$$updateEventHandler.bind(this);

.

This has resulted in the following error:

TypeError: Cannot read property 'bind' of undefined at ngModel.controller.NgModelController (angular.js:29413)

Based on my understanding, it appears that $$updateEventHandler is the culprit behind this problem. This was confirmed when I inspected it using devtools.

I attempted to update AngularJS to version 1.7.0, after previously trying versions 1.2, 1.3, 1.4.5, and 1.6.10, yet the same error persisted.

Despite researching extensively online, I could not find any relevant information on this issue. It seems likely that this may just be a silly mistake on my part. Nonetheless, after spending 6 hours on this, I am turning to the knowledgeable community here on Stack Overflow for assistance!

javascript angularjs webpack webpack-dev-server

Answer 1

Answer №1

I encountered a similar error in a decorator after updating:

$provide.decorator('ngModelDirective', ['$delegate', function($delegate) {
var ngModel = $delegate[0], controller = ngModel.controller;
ngModel.controller = ['$attrs', '$injector', function( attrs, $injector) {
  attrs.$set('name', 'custom');
  $injector.invoke(controller, this, {
    '$attrs': attrs
  });
}];
return $delegate;

}]);

To resolve this issue, it is recommended to assign the prototype of NGModel controller to the context using Object.setPrototypeOf(obj, prototype).

 $provide.decorator('ngModelDirective', ['$delegate', function($delegate) {
var ngModel = $delegate[0], controller = ngModel.controller;
ngModel.controller = ['$attrs', '$injector', function( attrs, $injector) {
  attrs.$set('name', 'custom');
  $injector.invoke(controller, Object.setPrototypeOf(this, controller.prototype), {
    '$attrs': attrs
  });
}];
return $delegate;

}]);

Answer 2

I encountered a similar error in a decorator after updating:

$provide.decorator('ngModelDirective', ['$delegate', function($delegate) {
var ngModel = $delegate[0], controller = ngModel.controller;
ngModel.controller = ['$attrs', '$injector', function( attrs, $injector) {
  attrs.$set('name', 'custom');
  $injector.invoke(controller, this, {
    '$attrs': attrs
  });
}];
return $delegate;

}]);

To resolve this issue, it is recommended to assign the prototype of NGModel controller to the context using Object.setPrototypeOf(obj, prototype).

 $provide.decorator('ngModelDirective', ['$delegate', function($delegate) {
var ngModel = $delegate[0], controller = ngModel.controller;
ngModel.controller = ['$attrs', '$injector', function( attrs, $injector) {
  attrs.$set('name', 'custom');
  $injector.invoke(controller, Object.setPrototypeOf(this, controller.prototype), {
    '$attrs': attrs
  });
}];
return $delegate;

}]);

The ngModel controller did not trigger the $$updateEventHandler function

Answer №1

Similar questions

Guide to ensuring the navbar remains at the top of the webpage following an image

Asserting types for promises with more than one possible return value

What is the best way to select just the innermost row of a nested table for emphasis?

Retrieve the product IDs by selecting the checkboxes, then compile a fresh array consisting of the identified IDs

Encountered an issue with ReactJS app authentication using Firebase and FirebaseUI. Error message reads: "Uncaught Error: Firebase App named '[DEFAULT]-firebaseui-temp' already exists

Modifying iframe src using click event from a separate component in Angular 10

Enhancing User Experience with AJAX-loaded Navigation Bar

Message displayed within Ng-repeat loop

Remove all spaces from input fields in angular Typescript, excluding the enter key

I am interested in accessing the information of the currently logged-in user

PHP Calculator with Dynamic Calculations

Is there a way to determine the image type from a link like this?

What is the best way to track the behavior of a module function in Jest?

Issues with MC-Cordova-Plugin on Ionic and Angular Setup

Working with numerous query parameters within AngularJS

Tips for pinpointing parent elements within a group of various sub child elements

It appears that my array is not being properly populated by my callback functions

D3 group of legendary elements

What is the proper syntax for Angular 2 form element attributes?

How can I extract the URL from the event listener in Cordova's in-app browser event and then automatically close it once a specific URL is reached?