ng-click에서 AngularJS 모델 업데이트, DOM 응답 없음

Question

버튼 클릭시 열리는 모달 창 안에 입력 상자와 텍스트 영역이 있습니다. 같은 입력 상자와 텍스트 영역이 다른 용도의 두 번째 모달에 사용 중입니다. 각 모달은 다른 컨트롤러 아래에 있습니다. 따라서 첫 번째 컨트롤러의 버튼을 클릭하면 다른 컨트롤러의 버튼을 클릭했을 때와 반대되는 모달에 특정 변경 사항을 적용하고 싶습니다.

그러나 이러한 컨트롤러는 이러한 입력 및 텍스트 영역을 공유하기 때문에 때로는 서로 정보가 ng-model으로 인해 서로 전달됩니다. 다른 때에는 모달 윈도우를 열고 입력을 입력 한 다음 닫고 같은 창을 다시 열면 내용이 입력 필드에 그대로 남아 있습니다.

내 컨트롤러 내에서 이러한 입력/텍스트 영역의 내용을 업데이트하는 방법을 알 수 없기 때문에이 모든 것입니다. 내가 뭘 잘못하고 있는지 모르겠다. 내 모델이 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를 사용하려고 시도했다. 똑같은 일을하기 위해이 모델들에서 $ watch를 시도했지만 운은 없다.

업데이트 : 선택한 대답이 효과가 있었지만 코드에서 어떤 효과가있는 것처럼 정확한 응답을 유지하는 여러 가지 다른 버그가있었습니다. 하지만 지금은 효과가 있습니다! 위 코드를 사용하지 마십시오.

Answer 1

범위 상속으로 인한 문제 일 수 있습니다. $scope.title 대신 $scope.postContent을 수행하는 대신 문자열 값을 객체 안에 속성으로 저장해야합니다. 마크 업

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

모달의 직접 컨트롤러

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

는 컨트롤러의 대신 아이 컨트롤러 당신이 작성한하지 가능성이 높습니다. 이에 대한 자세한 내용은 Understanding Scopes을 읽어보십시오. 일반적인 작업이므로 도움이 될 것입니다.