The ng-change and onchange events are not functioning as expected for the input field with the type "file"

Question

<button ng-click="controller.foo()">Click<button>

is functioning properly.

However,

<input type="file" ng-model="logo" onchange="controller.foo()">

seems to be malfunctioning. Additionally,

<input type="file" ng-model="logo" ng-change="controller.foo()">

is also not working as expected.

The error message I receive for the first one that is not working:

product-page4:1 Uncaught ReferenceError: controller is not defined at HTMLInputElement.onchange (product-page4:1)

As for the second one, there is no response at all.

Any suggestions on how to make this function properly for the input element?

Answer 1

Answer №1

In order to interact with the methods of a controller in your view, it is recommended to define them using $scope:

$scope.foo = function () {
  alert("works");
}

You can then call the method from HTML like this:

<input type="file" ng-model="logo" ng-change="foo()">

Although it may be possible with this (I have not tested it, but if I remember correctly...)

Controller:

this.foo = function () {
  alert("works");
}

HTML:

<input type="file" ng-model="logo" ng-change="controller.foo()">

Answer 2

In order to interact with the methods of a controller in your view, it is recommended to define them using $scope:

$scope.foo = function () {
  alert("works");
}

You can then call the method from HTML like this:

<input type="file" ng-model="logo" ng-change="foo()">

Although it may be possible with this (I have not tested it, but if I remember correctly...)

Controller:

this.foo = function () {
  alert("works");
}

HTML:

<input type="file" ng-model="logo" ng-change="controller.foo()">