CODEWITHSUNDEEP
javascripthtmlangularjsdata-bindingangularjs-model
user2465164
user2465164

Reputation: 937

Updating AngularJS models on ng-click, DOM not responding

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.

Upvotes: 0

Views: 926

Answers (1)

XrXr
XrXr

Reputation: 2067

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.

Upvotes: 3

Related Questions