javascript - Value in ng-model doesn't update - Stack Overflow

admin管理员组

文章数量:1389903

I'm using this

<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea>

and from what I can understand ng-model="notes" means that the textarea is assigned whatever $scope.notes is. This works correctly, however whenever I edit the text in the textarea, isn't $scope.notes supposed to change as well?

When I use this button:

<button ng-click="saveNotes(notes)"></button> 

The value of "notes" is always the original $scope.notes value and not the updated value.

Can someone tell me why this is?

Thanks

Edited to include html code:

<ion-view ng-controller="LectureCtrl" id="userMessagesView" view-title="{{lecture.title}}">
  <ion-content>
    <div style="position: absolute; top: 20px; left: 30px; right: 60px;">
      <div style="height: 100%;">
        <iframe class="video" width="560" height="315" src="{{lecture.youtubeLink}}" frameborder="0" allowfullscreen></iframe>

        <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes" ng-change="updatedNotes"></textarea>
      </div>
    </div>
  </ion-content>

  <button ng-click="saveNotes(notes)">
  </button>
<ion/view

I'm using this

<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea>

and from what I can understand ng-model="notes" means that the textarea is assigned whatever $scope.notes is. This works correctly, however whenever I edit the text in the textarea, isn't $scope.notes supposed to change as well?

When I use this button:

<button ng-click="saveNotes(notes)"></button> 

The value of "notes" is always the original $scope.notes value and not the updated value.

Can someone tell me why this is?

Thanks

Edited to include html code:

<ion-view ng-controller="LectureCtrl" id="userMessagesView" view-title="{{lecture.title}}">
  <ion-content>
    <div style="position: absolute; top: 20px; left: 30px; right: 60px;">
      <div style="height: 100%;">
        <iframe class="video" width="560" height="315" src="{{lecture.youtubeLink}}" frameborder="0" allowfullscreen></iframe>

        <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes" ng-change="updatedNotes"></textarea>
      </div>
    </div>
  </ion-content>

  <button ng-click="saveNotes(notes)">
  </button>
<ion/view

• javascript
• angularjs
• angular-ngmodel
• angularjs-ng-model

Share Improve this question Follow edited Jan 2, 2016 at 16:16 huysentruitw 28.2k1010 gold badges9595 silver badges141141 bronze badges asked Jan 2, 2016 at 15:54 tryingtolearntryingtolearn 2,66677 gold badges2727 silver badges4747 bronze badges 8

• 6 always ..always ..always use an object in ng-model. If there are child scopes in your view, the binding will break using primitives – charlietfl Commented Jan 2, 2016 at 16:02
• 1 Your code should work as written. See this JSFiddle: jsfiddle/sscovil/5udnmtgy -- the problem you are most likely having is that your button is in a different scope. – Shaun Scovil Commented Jan 2, 2016 at 16:05
• @ShaunScovil Hmm, how does this work exactly? There is only one controller assigned to the whole view isn't there? – tryingtolearn Commented Jan 2, 2016 at 16:09
• Based on your ment (since I can't see your code), I'm assuming your textarea is in the scope of one controller and your button is in the scope of another? If that is the case, see: stackoverflow./questions/21919962/… – Shaun Scovil Commented Jan 2, 2016 at 16:10
• 1 The ion-content directive has an isolated scope: github./driftyco/ionic/blob/master/js/angular/directive/… -- which means your button and your text area do not have access to the same scope variables. More on isolated scopes: docs.angularjs/guide/… – Shaun Scovil Commented Jan 2, 2016 at 16:15

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 3

Think of ng-model as a way to connect your controller variables to your HTML and vice versa. So if you set $scope.notes in your controller and your then use the curly brackets {{ notes }} in your html the variable content will show up in your html i.e.

Controller =>(bound to)=> your HTML ($scope.notes)

But it works both ways (2-way binding). So if you use ng-model in your HTML it will now take that content from the input field and set it to the variable in your controller. You don’t have to do anything as it is done in the background in Angular i.e. if you type in “Hello world” in your text area it is already updated to the variable in the controller. So you don’t need to pass it back with .

Controller <=(bound up to)<= HTML (ng-model="notes")

2-way binding has 3 parts (very simplified):

1. variable is set with $scope in controller. $scope.notes declares that any code or HTML within the controllers “umbrella” will have access to the variable.
2. connect the $scope variable to an HTML element with ng-model. Over simplified ng-model just says connect that $scope.notes variable to this element. I think it of it as a pipe between your HTML and ctrl and your don’t need to touch it as the variable content is flowing between the two managed by Angular
3. use {{}} to parse (bind) the variable out into the UI i.e. {{notes}} says show the contents of that variables

SIMPLE EXAMPLE OF 2WAY BINDING

  <input type="text" ng-model="first.greeting">
  <div ng-class="first.greeting">
    {{first.greeting}} {{"World"}}

  </div>

YOUR CODE // No eed to pass notes back it already is there in your ctrl

  // proof
    .controller('MyController', ['$scope', function($scope) {
         // if you set this up the string wills how up in your textarea
        $scope.notes = "Set notes two way binding";

       // click on notes and it will loot whatever you have entered into your input field
        $scope.saveNotes = function() {
            console.log('Lets check if notes is here', $scope.notes);
        }

    }])

     // Note if you set $scope.notes = "Set notes two way binding"; in your ctrl the  "Set notes two way binding" wills how up in your textbox
    <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea>

“Umbrella” $scope problem – $scope is not connected to its controller

Now if this already makes sense to you and you have it all setup and you are still experiencing problems then it is most likely you have a $scope problem i.e. the “pipeline” to your controller is disconnected. I think of this as moving from one area code to another i.e. you dial 555 every day and you fly to another state and then try to use 555 but is doesn’t work as the area code is 777. $scope.555 will only work with a controller that knows about 555. If you are a different state (controller) 555 means nothing and Angular in this case will “discard it”. It doesn’t actually discard it just assumes you are smart and dialing elsewhere that it doesn't currently know about (eg internationally) so it passes it along assuming that somewhere in the system something will know what to do with 555.

EXAMPLE OF SCOPE "DISCONNECT"

    .controller('ProductsController', ['$scope', function($scope) {
        $scope.product = "My product";

        $scope.saveProduct = function() {
            console.log('Lets check if product is here', $scope.product);
        }
    }])

    .controller('ReviewsController', ['$scope', function($scope) {

    }])

    <div ng-controller="ProductsController">
      /// lots of html stuff
    </div>
    <div ng-controller="ReviewsController">
            // Note: ProductsController is no longer managing the product variable. OtherStuffController now has "control" of all variables and it has no product variable
            // this seems logical but it happens all the time especially with large HTML or in my case template hell :) There are a number of tools to help with this debugging
            <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="product"></textarea>
    </div>

本文标签： javascriptValue in ngmodel doesn39t updateStack Overflow