Angular ng-change not calling code. Am I using wrong model

Question

I am building an app using MEAN.js generators and a tutorial I found online. Here I have a datepicker in one of my Angular views. For now I would like the ng-change directive to be recognized and do something. At the moment when I make a change to the date my test alert shown here does not get called.

<div class="form-group">
   <label class="control-label" for="statusdate">Status Date</label>
   <div class="controls">
      <input type="date"  ng-change="alert('something')" data-ng-model="statusDate" id="statusdate" class="form-control">
   </div>
</div>

Can somebody help? I am new to Angular.

Also, I read somewhere it may be because I used data-ng-model as opposed to ng-model. Could this be the case? If so then what is the difference between the two?

Michael Lorton · Answer 1 · 2015-07-01T14:42:09.627

Ah, the problem is, you don't have the context you think you do.

Almost everywhere in Javascript, the root of all the closures is window, which contains alert().

Almost everywhere, but not everywhere. Not in the context in which that ng-change() is evaluated. You could fix it by, for example, creating a controller that added a value called alert to the $scope, and pointing it to window.alert.

<div class="form-group">
   <label class="control-label" for="statusdate">Status Date</label>
   <div class="controls" ng-controller="myController">
      <input type="date"  ng-change="alert('something')" data-ng-model="statusDate" id="statusdate" class="form-control">
   </div>
</div>

And then in the Javascript:

angular.module("MyApp")
.controller("myController", ['$scope', '$window', function($scope, $window) {
  $scope.alert = $window.alert;
}]);

Edit: you could use just window instead of $window, because window is available here, but that will make your code more difficult to test in the long run.

score 2 · Accepted Answer · edited Jul 01 '15 at 05:12

2

You are executing a method that does not exist in the controller.

Try creating it like this:

$scope.alert = function(msg) {
    alert(msg);
 };

edited Jul 01 '15 at 05:12

ecarrizo

2,758
17
29

answered Jul 01 '15 at 03:25

BananaTiger

86
7

Looked more like this but yes your suggestion worked: $scope.alert = function () { alert(); }; – user2623706 Jul 01 '15 at 03:32
What if I don't want to create a separate function for alert, can I directly display alert from view file? like : **ng-change="$window.alert('alert something')" ??** – rahim.nagori Feb 20 '19 at 06:14

score 0 · Answer 3 · edited May 23 '17 at 10:29

The problem is ng-change is expecting an expression, but you're giving it a function name alert() to display the string 'something', and hence, it doesn't know what to do.

A possible solution to this is to add this on top of your HTML file

<script>
  angular.module('Your_App_Name', [])
    .controller('YourControllerName', ['$scope', '$window', function($scope, $window) {
      $scope.alert = function(message) {
          $window.alert(message);
      };
   }]);
</script>

Refer to the documentation for more info on how to use ng-change https://docs.angularjs.org/api/ng/directive/ngChange

Refer to difference b/w ng-model and data-ng-model to understand the difference between data-ng-model and ng-model. They should both work fine.

I would like to point out two problems with your answer. First, you don't explain _why_ `alert()`, which is otherwise almost universally knows, is unknown here; second, you "wrapped" the alert function for no (obvious) reason. On the other hand, your use of `$window` is instructive, so I am going to steal it for my answer. [evil laughter] — Michael Lorton, Jul 01 '15 at 14:40

Angular ng-change not calling code. Am I using wrong model

3 Answers3

Linked