0

I have a textarea attached to a $scope variable called newNoteText. The html is:

<textarea spellcheck="true"               
          ng-model="newNoteText"></textarea>

There's also a button that saves the typed note.

<button type="button" class="btn btn-default" 
       ng-click="btnPost_clicked(newNoteText)">Post
</button>

Here's the controller function btnPost_clicked:

        $scope.btnPost_clicked = function(newNoteText) {
            $scope.addNote(newNoteText);
            $scope.newNoteText = '';
        }

I confirmed via console.log that $scope.newNoteText is being reset to an empty string. But the textarea still holds the old text.

Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
Legion
  • 3,922
  • 8
  • 51
  • 95
  • I don't think that should be problem... does `text-area` is inside `ng-repeat`? – Pankaj Parkar Jul 02 '16 at 19:57
  • @PankajParkar No, it's not in an `ng-repeat`. – Legion Jul 02 '16 at 19:58
  • @Legion It might be helpful if you post some more code – Jaqen H'ghar Jul 02 '16 at 19:59
  • @Legion could you reproduce problem in plunkr? – Pankaj Parkar Jul 02 '16 at 19:59
  • 3
    Can you reproduce it in some demo fiddle or plunkr? for me it works: http://jsfiddle.net/5darc76z/ looks like some typo – Maxim Shoustin Jul 02 '16 at 20:00
  • This could be a result of breaking the rule of always using an object in `ng-model`. If there are child scopes involved you lose binding of primitives – charlietfl Jul 02 '16 at 20:07
  • @MaximShoustin Tried that. It works there. Just not in app. – Legion Jul 02 '16 at 20:09
  • See http://stackoverflow.com/a/17607794/1175966. Watch the 3 minute video too – charlietfl Jul 02 '16 at 20:10
  • @charlietfl You are correct. All I wanted was a placeholder variable. I really dislike this aspect of angular. If a particular field doesn't match up with my viewmodel I have to create a dummy object and dummy property. In these cases it seems so much cleaner, easier and performant to just use `document.getElementById`. – Legion Jul 02 '16 at 20:17
  • Not difficult if you always use objects in scope. One object can cover a lot of variables...or using `controllerAs` avoids needing to create object and makes problem go away – charlietfl Jul 02 '16 at 20:20
  • @charlietfl I do use models on $scope. But in cases like this where a field is being used to create a new object (a new note in this case) there is no existing object to attach it to. Basically, any time a field is acting as a user driven object generator I find model binding becomes clumsy. I know it can be done, but I can't think of a circumstance where it should be done. – Legion Jul 02 '16 at 20:25
  • You say that but you are using primitive for `$scope.newNoteText`. If you had `$scope.model={}` and set `$scope.model.newNoteText='some value'` and `ng-model="model.newNoteText"` would work fine – charlietfl Jul 02 '16 at 20:28
  • @charlietfl Yes, except newNoteText shouldn't be part of my model. I attach my model to the $scope, but my model doesn't have properties that are UI specific. I see this as corrupting my domain models with UI details. – Legion Jul 02 '16 at 20:33
  • huh? not UI specific at all. You want to work with that model data for `newNoteText` in controller so what does UI matter? – charlietfl Jul 02 '16 at 20:36

1 Answers1

0

This can happen only when you get an error in $scope.addNote(newNoteText). See below code and try jsfiddle I created. I am just logging newNoteText in addNote and everything seem to be working fine.

HTML : 

<div ng-controller="MainCtrl">

  <textarea spellcheck="true"               
          ng-model="newNoteText"></textarea>

  <div>{{txt}}</div>

  <button type="button" class="btn btn-default" 
       ng-click="btnPost_clicked(newNoteText)">Post
</button>
</div>

JavaScript :

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

app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.txt = '';

  $scope.btnPost_clicked = function(newNoteText) {
    $scope.addNote(newNoteText);
    $scope.newNoteText = '';
  };

  $scope.addNote = function(newNoteText) {
    console.log(newNoteText);
  }
}]);

jsfiddle : https://jsfiddle.net/nikdtu/d89ftrmg/

Nikhil Maheshwari
  • 2,198
  • 18
  • 25