Updating AngularJS models on ng-click, DOM not responding

Question

I have an input box and a textarea that are held inside a modal window that is open upon a button-click. The same input box and textarea are in use by a second modal with a different purpose. Each modal is under a different controller. So when I click on the button for the first controller, I want certain changes to apply to the modal as opposed to when I click on the other controller's button.

However, since these controllers share these input and textarea fields, sometimes information from one and the other pass to each other due to the ng-models within them. Other times, if I open a modal window, type into the inputs, close it, and then reopen the same window, the content still remains in the input fields.

This is all because I can't figure out how to update the content of these input/textarea fields from within my controllers. I'm not sure what I'm doing wrong. My models are not updating the DOM--help?

ControllerA, for new posts:

$scope.anonOrName = "anonymous"; //value when user posts anonymously
$scope.systemUserName="name from system here"; //value when user posts not-anon

//New title defined by the user for the post.
$scope.title="";

//post content the user fills in
$scope.postContent = "";

/*
* Operates the New Post modal window, calling functions from the modalManager
*factory
*/
$scope.newIdeaClick = function() {
    $scope.title=""; //make sure title input is blank, doesn't work
    $scope.postContent=""; //make sure the textbox is blank, doesn't work
    document.getElementById('title').disabled = false; //allows user to type a new title, sometimes doesn't work
    document.getElementById('anonymous').disabled = true; //user must post anonymously
    modalManager.open('newPost'); //open the modal window
};

ControllerB, for new comments:

$scope.anonOrName = "anonymous";
$scope.systemUserName="name from system here";

//Title of the post the user is commenting on. The user cannot change this.
$scope.title="";

// Content of the textarea, the new comment written by the user.
$scope.postContent = "";


/*
* Operates the New comment modal window, calling functions from the modalManager factory
*/
$scope.newCommentClick = function() {
    $scope.title="(some title will go here"; //sets the title, cannot be changed, doesn't work
    $scope.postContent=""; //make sure the textbox is blank, doesn't work
    document.getElementById('anonymous').disabled = false; //user can select anon or not
    document.getElementById('title').disabled = true; //user may not choose new title
    modalManager.open('newComment');
};

index.html has two calls of the following code, one under ControllerA, the other under ControllerB:

<modal>
    <input ng-model="title" class="titleInputBox" id="title" />
    <div class="commentPostName">
        <div class="nameBlank">
            {{anonOrName}}
        </div>
        <label>
            Anonymous: 
            <input type="checkbox" ng-model="anonOrName" class="anonCheckBox" ng-true-value="anonymous" ng-false-value="{{systemUserName}}" id="anonymous" />
        </label>
    </div>
    <textarea id="postBodyTextArea" ng-model="postContent">
    </textarea>
</modal>

title and postContent are my two models I'm trying to set blank upon each time the respective post or comment button is clicked, calling the click functions defined in each controller. But they won't update the blanks in DOM.

Any help would be greatly appreciated!

Update: Through debug statements I've been able to determine that the values themselves have been reset to blank like I've written code for, but the change simply doesn't respect on the DOM. I've also tried to use $scope.$watch on these models to do the same thing, but no luck.

Update: The selected answer worked, but I had various other bugs in my code that kept the correct answer from acting as if it had any effect. But it's working now! Just not with the above code.

I'll try to help if you post a jsfiddle or plunker that illustrates your problem. — Jonathan Wilson, Jun 25 '14 at 08:49

score 3 · Accepted Answer · answered Jun 24 '14 at 20:50

3

The issue might be caused by scope inheritance. Instead of doing $scope.title, $scope.postContent you should store the string values inside an object as a property.

$scope.models = {
    title : "",
    postContent: ""
};

in markup

<input ng-model="models.title" class="titleInputBox" id="title" />
<textarea id="postBodyTextArea" ng-model="models.postContent">

The direct controller of the modal is likely not the controller you've written, instead a child of your controller. For details on this, please read Understanding Scopes, you will probably benefit from it as it is a common task.

answered Jun 24 '14 at 20:50

XrXr

2,027
1
14
20

It's a good idea, but doesn't seem to work! ): I'll read the link, though, thanks. – user2465164 Jun 24 '14 at 20:58
Are you clearing the values properly? Like `$scope.models.title = ""` might seem obvious but I really don't think there is any other way something this basic could go wrong – XrXr Jun 24 '14 at 21:00
It looks like my actual problem is that the input is never being passed back into the controller. The controller thinks it is clear (according to some quick debug statements I've tried at the beginning of my ng-click), but the input field still has words in it when I open up the modal again. I'm not really sure what to make of this situation. – user2465164 Jun 24 '14 at 21:09
What are you using to make the modal? If the library is not native to Angular that might be the problem – XrXr Jun 24 '14 at 21:15
I've defined my own modals using a directive and factory to handle modalManager. The modals themselves seem to function fine. – user2465164 Jun 24 '14 at 21:21
Maybe you can include a JSfiddle or plunker to help others better diagnose the issue. There might be something wrong inside your directive – XrXr Jun 24 '14 at 21:33

Updating AngularJS models on ng-click, DOM not responding

1 Answers1