Angular two way binding does not appear to work while the documentation says that it should

Question

I am trying to use the value of $scope.commentText but when I call addComment() the scoped variable is empty eventhough it is bound. As a workaround I pass the commentext as a parameter value that works but still it should work. My question how do I clear out commentText which is bound to a text input ... but it does not work as expected either. I looked around... and I am missing something cause I am doing exactly as the docs tell me how to. So... anyone?

  $scope.user = "WM";
  $scope.commentText='';
  $scope.addComment = function(plan, commentText) {
    console.log(commentText)
    plan.comments.push({text:commentText, user:$scope.user);
    commentText=null;
    $scope.commentText=null;
  };

and the view:

        <form ng-submit="addComment(plan, commentText)">
          <div class="input-group">
            <input class="form-control" type="text" ng-model="commentText" size="30" placeholder="add new comment here">
            <span class="input-group-btn">
              <input class="btn btn-primary" type="submit" value="add">
            </span>
          </div>
        </form>

plunker: http://plnkr.co/edit/lG0Ckjctsj9Hu83lTydh?p=preview

"binding blues" and "Doesn't work as expected" aren't sufficient problem statements. What happens? What do you expect to happen? What have you attempted to do to fix the issue? what doesn't work with what you've tried? — George Stocker, Jun 26 '14 at 00:37
@GeorgeStocker It was sufficient enough to be recognized as a "common" problem straight away — Jorg, Jun 26 '14 at 01:02
@Jorg If you'd like to edit the question to make it more clear and useful for future Googlers, go for it. But our line in the sand is pretty clear: questions that aren't written well enough to be useful for future searchers aren't useful enough to be kept open. Of course, if you edit the question to make it more searchable, it'll go into a review queue and will likely be re-opened. Would you rather have internet points or a question that is useful to future visitors? — George Stocker, Jun 26 '14 at 01:04
@GeorgeStocker I don't care about the points and this can be deleted if SO thinks that's what should happen to it, I just thought the question wasn't that bad (although it could have been solved with more research). — Jorg, Jun 26 '14 at 01:06

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

use this.commentText=null; instead of $scope.commentText=null in the addComment method.

Updated your plunkr

Edit: I started typing up an explanation when I noticed there is an excelent one right here: 'this' vs $scope in AngularJS controllers

edited May 23 '17 at 10:26

Community

1
1

answered Jun 26 '14 at 00:35

Jorg

7,219
3
44
65

This works. But I'm not sure how. Why is $scope.commentText still empty string at time of addComment? He doesn't need to pass in commentText, should just be able to use the model value. – Alex B Jun 26 '14 at 00:42
Ah so small an oversight. I should have caught that. Ah well thanks for answering according to gorge my unworthy question. – wendellmva Jun 26 '14 at 00:43

Angular two way binding does not appear to work while the documentation says that it should

1 Answers1