Angular ng-change 没有调用代码。我用错型号了吗

Question

我正在使用 MEAN.js 生成器和我在网上找到的教程构建应用程序。我的 Angular 视图之一中有一个日期选择器。现在我希望 ng-change 指令被识别并做一些事情。在我更改日期的那一刻，我的测试警报没有被调用。

<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>

有人可以帮忙吗？我是 Angular 的新手。

另外，我在某处读到这可能是因为我使用了 data-ng-model 而不是 ng-model。会是这样吗？如果是那么两者有什么区别？

Answer 1

您正在执行控制器中不存在的方法。

尝试像这样创建它：

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

Answer 2

啊，问题是，你没有你认为的上下文。

Javascript中几乎所有地方，所有闭包的根都是window，其中包含alert().

几乎无处不在，但并非无处不在。不在评估 ng-change() 的上下文中。例如，您可以通过创建一个控制器来修复它，该控制器将一个名为 alert 的值添加到 $scope，并将其指向 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>

然后在Javascript:

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

编辑： 你可以只使用 window 而不是 $window，因为 window 在这里可用，但这将使你的代码在长运行.

中更难测试

Answer 3

问题是 ng-change 需要一个表达式，但你给它一个函数名 alert() 来显示字符串 'something'，因此，它不知道该怎么做。

一个可能的解决方案是将其添加到您的 HTML 文件

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

有关如何使用 ng-change 的更多信息，请参阅文档 https://docs.angularjs.org/api/ng/directive/ngChange

参考difference b/w ng-model and data-ng-model了解data-ng-model和ng-model的区别。他们应该都能正常工作。

Angular ng-change 没有调用代码。我用错型号了吗

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

javascript

angularjs-directive

mean-stack

meanjs

angularjs-ng-change