AngularJS待办项目遇TypeError: $event is undefined错误，求解决方案

Hey there! Let's figure out why that $event is giving you trouble in your AngularJS todo app. I’ve seen this issue pop up a few times, so let’s break down the common fixes step by step.

First off, make sure you’re actually passing the $event variable correctly in your template’s keyboard event binding. For example, if you’re using ng-keyup or ng-keypress on your edit input, it should look like this:

<!-- 正确的绑定方式：明确传入$event -->
<input 
  type="text" 
  ng-keyup="enterAgain($event)" 
  ng-model="activeTask.content" 
  ng-show="editing"
/>

AngularJS’s $event is a special context variable—you can’t just omit it in the template and expect the function to receive it automatically. If your template only has enterAgain(), that’s definitely why the parameter is undefined.

Next, check that your controller function is actually accepting the parameter (and that you’re using the right name in the function body). For example:

angular.module('TodoApp').controller('TodoCtrl', function($scope) {
  $scope.editing = false;
  $scope.activeTask = {};

  $scope.enterAgain = function($event) {
    // 先确认事件对象是否存在，再判断回车键
    if ($event && $event.keyCode === 13) {
      // 这里写你的保存逻辑：比如更新任务、退出编辑模式
      $scope.editing = false;
      console.log('Task saved successfully!');
    }
  };
});

It doesn’t matter if you name the parameter $event or just event—the key is that you use the same name in the function definition as you do when referencing it inside the function. If you accidentally wrote function(evt) but tried to access $event.keyCode, that would throw an undefined error too.

If you’re still stuck, add a console log at the start of your enterAgain function to see what’s actually being passed:

$scope.enterAgain = function($event) {
  console.log('Received event:', $event); // 看看控制台输出的是什么
  // ... rest of your logic
};

If the log shows undefined, the problem is definitely in how you’re binding the event in the template. If it shows a valid KeyboardEvent object, then the issue might be in later parts of your code (like trying to access a property that doesn’t exist on the event).

If you want to avoid dealing with $event altogether, you can create a simple custom directive that triggers a function when the Enter key is pressed:

angular.module('TodoApp').directive('ngEnter', function() {
  return function(scope, element, attrs) {
    element.bind('keydown keypress', function(event) {
      if (event.which === 13) {
        scope.$apply(function() {
          scope.$eval(attrs.ngEnter);
        });
        event.preventDefault();
      }
    });
  };
});

Then use it in your template like this:

<input 
  type="text" 
  ng-enter="saveEditedTask()" 
  ng-model="activeTask.content" 
  ng-show="editing"
/>

This way, you don’t have to worry about passing $event at all—just handle your save logic directly in saveEditedTask.

内容的提问来源于stack exchange，提问作者user8070092