我有一个输入框和一个文本区域,它们都保存在一个模式窗口中,该模式窗口在单击按钮时会打开。另一个目的不同的第二个模式正在使用相同的输入框和文本区域。每个模式都在不同的控制器下。因此,当我单击第一个控制器的按钮时,我希望对模态进行某些更改,而不是单击另一个控制器的按钮时。
但是,由于这些控制器共享这些输入字段和文本字段,因此有时由于它们中的,来自彼此的信息会彼此传递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下,另一个在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
和postContent
是我的两个型号每个相应的信息或评论,点击按钮时在我试图设置空白,呼吁在每个控制器中定义的点击功能。但是他们不会更新DOM中的空白。
任何帮助将不胜感激!
更新:通过调试语句,我已经能够确定值本身已重置为空白,就像我为其编写代码一样,但是更改根本不遵守DOM。我还尝试在这些模型上使用$ scope。$ watch做同样的事情,但是没有运气。
更新:选定的答案有效,但是我的代码中还有许多其他错误,使正确答案无法发挥任何作用。但是现在正在工作!只是不与上面的代码。
该问题可能是由于范围继承引起的。而不是这样做$scope.title
,$scope.postContent
您应该将字符串值存储在对象中作为属性。
$scope.models = {
title : "",
postContent: ""
};
在标记中
<input ng-model="models.title" class="titleInputBox" id="title" />
<textarea id="postBodyTextArea" ng-model="models.postContent">
模态的直接控制器可能不是您编写的控制器,而是控制器的子代。有关此内容的详细信息,请阅读了解作用域,因为它是一项常见任务,您可能会从中受益。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句