在ng-click上更新AngularJS模型，DOM沒有響應

Question

我有一個輸入框和一個textarea，它們保存在一個模式窗口中，該窗口在按下按鈕時打開。具有不同用途的第二個模式正在使用相同的輸入框和textarea。每種模式都在不同的控制器下。所以當我點擊第一個控制器的按鈕時，我想要對模式進行一些更改，而不是單擊其他控制器的按鈕。

但是，由於這些控制器共享這些輸入和textarea字段，所以有時由於其中的ng-model而彼此傳遞信息。其他時候，如果我打開一個模式窗口，輸入輸入，關閉它，然後重新打開同一個窗口，內容仍然保留在輸入字段中。

這一切都是因爲我無法弄清楚如何從我的控制器內更新這些輸入/ textarea的字段的內容。我不確定我做錯了什麼。我的模型沒有更新DOM - 幫助？

ControllerA，對於新的職位：

$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，新的意見：

$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具有下面的代碼的兩個電話，一個ControllerA下，另一個在控制器B下：

<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和postContent是我的兩個模型，我試圖在每次單擊相應的帖子或評論按鈕時設置空白，調用每個控制器中定義的點擊功能。但他們不會更新DOM中的空白。

任何幫助將不勝感激！

更新：通過調試語句，我已經能夠確定該值本身已被重置爲空白像我寫的代碼，但變化根本就不對DOM的尊重。我也嘗試使用$ scope。$觀察這些模型來做同樣的事情，但沒有運氣。

更新： 所選答案的工作，但我有我的代碼中的各種其他錯誤，保持了正確的答案，從充當如果它有任何影響。但它現在正在工作！只是沒有上面的代碼。

Answer 1

該問題可能是由作用域繼承引起的。而不是在做$scope.title,$scope.postContent你應該將字符串值作爲一個屬性存儲在一個對象中。

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

在標記

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

模態的直接控制可能不是控制你寫的，而不是一個控制器的孩子。有關詳細信息，請閱讀Understanding Scopes，您可能會從中受益，因爲這是一項常見任務。