In my current setup, I have implemented a custom directive that detects when the user presses enter and then triggers the same function as ngSubmit in the surrounding form element.
I am facing an issue where I need access to the event from within the controller, but it always shows up as undefined. Has anyone encountered this problem before? What could be causing it? References or explanations are welcome.
Is there a more efficient way to handle this than duplicating the method call twice? (secondary)
var app = angular.module('app', []);
app.controller('submitCtrl', ['$scope', function($scope) {
$scope.submitContent = function(event) {
//I am trying to access this
console.log(event); //However, it is coming up as 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>