自定义 ng-enter 指令不将 $event 从 html 传递到控制器

2024-02-20

我正在使用一个自定义指令来检测用户何时按下 Enter 键,然后调用 ngSubmit 中调用的相同函数周围的表单元素。

下面是我的问题的演示,我需要从控制器内访问事件,但它始终是未定义的。

以前有人遇到过这个问题吗?问题是什么?为什么会发生这种情况?参考文献的链接和解释一样好。

有没有比重复方法调用两次更好的方法? (次要)

var app = angular.module('app', []);

app.controller('submitCtrl', ['$scope', function($scope) {

  $scope.submitContent = function(event) {
    //This is what I am looking for.
    console.log(event); //This is undefined. 
  }
}]);

app.directive('mvEnter', function() {
  return function(scope, element, attrs) {
    element.bind('keydown keypress', function(event) {
      if (event.which === 13) {
        scope.$apply(function() {
          scope.$eval(attrs.mvEnter);
        });
        event.preventDefault();
      }
    });
  };
});
<!DOCTYPE html>
<html>
<head></head>

<body ng-app='app'>
  <div ng-controller="submitCtrl">
    <textarea mv-enter="submitContent($event);"></textarea>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

</html>

$eval https://github.com/angular/angular.js/blob/master/src/ng/rootScope.js#L989-L991方法看起来像这样$scope.$eval(expr, locals),这意味着您可以使用locals的对象$eval函数,其中键是参数名称($event).

scope.$eval(attrs.mvEnter, {$event: event});

Preview http://plnkr.co/edit/aJGpyQhDtueNCK6W8HmF?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

自定义 ng-enter 指令不将 $event 从 html 传递到控制器 的相关文章