AngularJS on enter directive on form input no saving Model value
angularjs, angularjs-directive
Solution
Ok figured it out. Turns out when you define a scope object in your directive you create a new child scope. Details found here:
Directive with scope breaking ngmodel of an input
To fix this I removed the `scope` declaration and used the value of the function from `attrs` object.
Directive looks like this now:
app.directive('onEnter',function() {
var linkFn = function(scope,element,attrs) {
element.bind("keypress", function(event) {
if(event.which === 13) {
scope.$apply(function() {
scope.$eval(attrs.onEnter);
});
event.preventDefault();
}
});
};
return {
link:linkFn
};
});
Full code in plunker
Problem
I have the following on a page - full code in this Plunker There is a custom `onEnter` directive that calls a function when enter is pressed on a chat form input. Code snippet below ``` //**HTML View** <div ng-controller="mainCtrl"> <ul> <li ng-repeat="chat in chatMessages"> {{chat.username}}<br/> {{chat.message}} </li> </ul> </div> <form id="chatForm" name="chatForm" ng-controller="formCtrl"> <label for="chat-username">User: </label> <input type="text" id="chat-username" class="chat__username" ng-model="chat.username" required> <label for="chat-input">Chat: </label> <input type="text" id="chat-input" class="chat__input" on-enter="sendChat()" ng-model="chat.message" required> <a href="#" class="chat__submit icon-comments" id="chat-submit" ng-click="sendChat()" ng-disabled="isChatValid()">Chatme</a> </form> //**Javascript** app.controller('formCtrl',function($scope,Chats){ $scope.sendChat = function() { if($scope.isChatValid()) { return; } console.log(JSON.stringify($scope.chat)); var msg = {}; angular.copy($scope.chat,msg); Chats.data.push(msg); }; $scope.isChatValid = function() { return $scope.chatForm.$invalid; }; }); ``` Problem is the value of the input (`message`) is not saved into the scope model (`chat`). If I remove the `onenter` directive it works. What am I missing here? Any help will be great