AngularJS on enter directive on form input no saving Model value

Question

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

Community · Accepted Answer · 2017-05-23 12:26:10Z

11

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

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 22, 2013 at 1:03

Mike E.

2,1831 gold badge15 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shaunhusain Over a year ago

ah didn't see you also got it

Iamisti Over a year ago

personally I don't like this solution because it uses $eval

Klon Over a year ago

At the beginning I had the same opinion as @lamisti . However, I realized that this solution has big advantage - it does not create isolate scope, so there'll be no conflicts with other potential directives with isolate scope, that might be applied to the same DOM element.

zool · Accepted Answer · 2014-03-27 06:02:19Z

2

For angular 1.2 i wrote like:

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

app.directive('onEnter', function() {
    return {
        scope: {onEnter: '&'},
        link: function(scope, element) {
            console.log(scope);
            element.bind("keydown keypress", function(event) {
                if(event.which === 13) {
                    scope.onEnter();
                    scope.$apply();
                }
            });
        }
    }
});

answered Mar 27, 2014 at 6:02

zool

1063 bronze badges

1 Comment

Iamisti Over a year ago

improved solution would be: scope.$apply(function(){ scope.onEnter(); });

zs2020 · Accepted Answer · 2013-08-22 01:05:16Z

1

You should use $parent to refer to the chat object like this

$parent.chat.message

Because you use the directive which declares a child scope. Here is the full html:

<input type="text" id="chat-input" class="chat__input" on-enter="sendChat()" ng-model="$parent.chat.message" required>

answered Aug 22, 2013 at 1:05

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

1 Comment

Mike E. Over a year ago

thanks for the answer @sza,I figured out it was a scope thing and solved it

Community · Accepted Answer · 2017-05-23 12:18:18Z

0

In reply to @zool:

I had to modify your answer as follows to avoid my onEnter function being called twice:

[...]
if(event.which === 13) {
    event.preventDefault();
    scope.onEnter();
    scope.$apply();
}
[...]

Also see AngularJS form not submitting when pressing enter

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jul 9, 2015 at 8:36

user1631668

Collectives™ on Stack Overflow

AngularJS on enter directive on form input no saving Model value

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related