Closing modal doesn't clear textarea data, but it does clear the model

Question

I have a simple modal which contains a text area. My problem is resetting the data of the textarea.

Here is my modal:

<div class="modal fade" ng-controller="MyCtrl">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <textarea ng-model="content" ng-change="statusChange(content)" placeholder="update" required="required"></textarea>
            </div>
         </div>
         <div class="modal-footer">
             <a class="btn" data-dismiss="modal" aria-hidden="true" ng-click="reset()">
                 Cancel
             </a>
         </div>
    </div>
 </div>

My controller:

myApp.controller('MyCtrl', function($scope){
    $scope.content="";

    $scope.statusChange = function(param){
        $scope.content = param;
    }

    $scope.reset = function(){
        $scope.content = "";
    }
})

My problem: I have the data in the textarea bound to content via ng-model, but if I enter content into my text area, and then close the modal, we get $scope.content="", however, when I reopen the modal, the textarea still contains the previously entered data. I can confirm by printing out the data of the content, that the data in the text area is not the same as the value of $scope.content.

How can I force the text area to have the same value of $scope.content when the modal is reopened?

Here is a JSFiddle of the problem http://jsfiddle.net/RLQhh/64/. To see the issue, open the modal, type something in the textarea and then click the close button. Notice the console output (it should show what you typed, followed by the empty string). Now reopen the modal, and you will see that the last thing you typed is what is in the textarea. Also notice then reopening the window, the current data in $scope.content is displayed in the console (it is empty).

you're missing the closing quote on you're ng-controller attribute. can't say that's the issue for sure, but if those functions aren't running (can't determine if they are from your post), it probably is... — Nicolas Straub, Oct 17 '14 at 01:44
Oops, that was a typo when creating a small snippet with the pertinent info. The code closes the window, and I can verify that the `$scope.content` is empty after the call. — Sunde, Oct 17 '14 at 01:50
tbh I haven't been able to get it to load in a jsfiddle nor my local machine. That jsfiddle you're getting up will be much appreciated — Nicolas Straub, Oct 17 '14 at 02:05
I'm pretty new to jsFiddle, is there a way to get it to use bootstrap? — Sunde, Oct 17 '14 at 02:14
there's an external resources tab on the left you can use to include bootstrap. With that said, I don't think anyone will mind if the example isn't styled :) — Nicolas Straub, Oct 17 '14 at 02:16
Thank you :) I was mainly concerned with getting the modal to actually pop up. I've created a working jsfiddle with my problem. — Sunde, Oct 17 '14 at 02:53

score 1 · Accepted Answer · edited May 23 '17 at 12:05

you need to put content into an object within the scope.

I updated the fiddle and it works. Instead of $scope.content use $scope.modal.content. See this answer for more info. A more detailed explanation can be found here, but it basically has to do with the way primitives work in javascript and scope sharing.

ng-model is a directive that creates another scope and binds ('=') the property on the parent scope to the value of the textbox (or textarea, or select, etc). When the property is a primitive, it gets passed by value, and is copied to the inner scope. Since objects get passed by reference, this isn't an issue when the property is nested, because the reference to the object is passed.

when you write directly to content on you're scope in you're reset method, it replaces (writes) the value on $scope for the controller, not the ng-model directive, and the go out of sync. if, however, you have ng-model bound to an object, when you write to content (in this case modal.content), you are reading modal and writing to it's content property. the value gets replaces, but since your ng-model is bound to modal rather than content directly, the binding isn't broken (you only read modal, didn't write to it).

Thanks for the help, this worked for me, and it helped me learn some more about angular (I'm new to angular, and I'm working on converting a site from backbone to angular). — Sunde, Oct 17 '14 at 03:33
glad I could help. After reading through the links I got familiarized enough to better explain the problem in my answer. Hope it helps — Nicolas Straub, Oct 17 '14 at 03:46

Closing modal doesn't clear textarea data, but it does clear the model

1 Answers1