Javascript 在ng单击时更新AngularJS模型,DOM没有响应
我有一个输入框和一个文本区域,它们被保存在一个模式窗口中,只要点击按钮就可以打开。相同的输入框和文本区域被另一个具有不同用途的模态使用。每个模态在不同的控制器下。因此,当我单击第一个控制器的按钮时,我希望将某些更改应用于模态,而不是单击另一个控制器的按钮 但是,由于这些控制器共享这些输入和文本区域字段,有时由于其中的Javascript 在ng单击时更新AngularJS模型,DOM没有响应,javascript,html,angularjs,data-binding,angularjs-model,Javascript,Html,Angularjs,Data Binding,Angularjs Model,我有一个输入框和一个文本区域,它们被保存在一个模式窗口中,只要点击按钮就可以打开。相同的输入框和文本区域被另一个具有不同用途的模态使用。每个模态在不同的控制器下。因此,当我单击第一个控制器的按钮时,我希望将某些更改应用于模态,而不是单击另一个控制器的按钮 但是,由于这些控制器共享这些输入和文本区域字段,有时由于其中的ng模型s,来自其中一个和另一个的信息会相互传递。其他时候,如果我打开一个模式窗口,在输入中键入内容,关闭它,然后重新打开同一个窗口,内容仍然保留在输入字段中 这都是因为我不知道如何
ng模型
s,来自其中一个和另一个的信息会相互传递。其他时候,如果我打开一个模式窗口,在输入中键入内容,关闭它,然后重新打开同一个窗口,内容仍然保留在输入字段中
这都是因为我不知道如何从控制器中更新这些输入/文本区域字段的内容。我不确定我做错了什么。我的模型没有更新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
};
$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');
};
控制器B,如需新评论:
$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
};
$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>
{{anonOrName}}
匿名:
title
和postContent
是我的两个模型,每次单击相应的post或comment按钮,调用每个控制器中定义的click函数时,我都试图将其设置为空。但是他们不会更新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">
模态的直接控制器可能不是您编写的控制器,而是控制器的子控制器。有关这方面的详细信息,请阅读,您可能会从中受益,因为这是一项常见任务。此问题可能是由范围继承引起的。与其执行
$scope.title
,$scope.postContent
,不如将字符串值作为属性存储在对象中
$scope.models = {
title : "",
postContent: ""
};
加价
<input ng-model="models.title" class="titleInputBox" id="title" />
<textarea id="postBodyTextArea" ng-model="models.postContent">
模态的直接控制器可能不是您编写的控制器,而是控制器的子控制器。有关这方面的详细信息,请阅读,您可能会从中受益,因为这是一项常见任务。此问题可能是由范围继承引起的。与其执行
$scope.title
,$scope.postContent
,不如将字符串值作为属性存储在对象中
$scope.models = {
title : "",
postContent: ""
};
加价
<input ng-model="models.title" class="titleInputBox" id="title" />
<textarea id="postBodyTextArea" ng-model="models.postContent">
模态的直接控制器可能不是您编写的控制器,而是控制器的子控制器。有关这方面的详细信息,请阅读,您可能会从中受益,因为这是一项常见任务。此问题可能是由范围继承引起的。与其执行
$scope.title
,$scope.postContent
,不如将字符串值作为属性存储在对象中
$scope.models = {
title : "",
postContent: ""
};
加价
<input ng-model="models.title" class="titleInputBox" id="title" />
<textarea id="postBodyTextArea" ng-model="models.postContent">
模态的直接控制器可能不是您编写的控制器,而是控制器的子控制器。有关这方面的详细信息,请阅读,您可能会从中受益,因为这是一项常见的任务。这是一个好主意,但似乎不起作用!):不过,我会阅读链接,谢谢。您是否正确清除了这些值?像
$scope.models.title=”“
可能看起来很明显,但我真的不认为有任何其他方法可以让这个基本错误。看起来我的实际问题是,输入永远不会被传递回控制器。控制器认为这很清楚(根据我在ng单击开始时尝试的一些快速调试语句),但当我再次打开模式时,输入字段中仍然有单词。我真的不知道该如何处理这种情况。你用什么来制作模型?如果库不是Angular自带的,这可能就是问题所在。我已经使用指令和工厂定义了自己的modals来处理modalManager。情态动词本身似乎功能正常。这是个好主意,但似乎不起作用!):不过,我会阅读链接,谢谢。您是否正确清除了这些值?像$scope.models.title=”“
可能看起来很明显,但我真的不认为有任何其他方法可以让这个基本错误。看起来我的实际问题是,输入永远不会被传递回控制器。控制器认为这很清楚(根据我在ng单击开始时尝试的一些快速调试语句),但当我再次打开模式时,输入字段中仍然有单词。我真的不知道该如何处理这种情况。你用什么来制作模型?如果库不是Angular自带的,这可能就是问题所在。我已经使用指令和工厂定义了自己的modals来处理modalManager。情态动词本身似乎功能正常。这是个好主意,但似乎不起作用!):不过,我会阅读链接,谢谢。您是否正确清除了这些值?像$scope.models.title=“”
可能看起来很明显,但我真的不认为有任何其他方法可以让这个基本错误。看起来我的实际问题是输入永远不会被传递回cont