在NG-模型值不更新 [英] Value in ng-model doesn't update
问题描述
我使用这个
＆LT; TextArea类=笔记占位符=占位符文本的风格=高度：630像素; NG-模式=笔记＆GT;＆LT; / textarea的＆GT;
和从我可以理解NG模型=注意事项表示textarea的分配无论$ scope.notes是。这正常工作，但每当我在textarea的编辑文本，是不是$应该改变以及scope.notes？
当我使用这个按钮：
＆LT;按钮NG点击=saveNotes（注）＆GT;＆LT; /按钮＆GT;
的注意事项的值始终是原来的$ scope.notes值，而不是更新后的值。
谁能告诉我这是为什么？
感谢
编辑，包括HTML code：
＆LT;离子视图NG控制器=LectureCtrlID =userMessagesView视图标题={{lecture.title}}＆GT;
＆LT;离子含量＆GT;
＆LT; DIV的风格=的位置是：绝对的;顶部：20像素;左：30PX;右：60像素;＆GT;
＆LT; DIV的风格=高度：100％;＆GT;
＆LT; IFRAME类=视频WIDTH =560HEIGHT =315SRC ={{lecture.youtubeLink}}FRAMEBORDER =0的allowFullScreen＆GT;＆LT; / IFRAME＆GT; ＆LT; TextArea类=笔记占位符=占位符文本的风格=高度：630像素; NG-模式=笔记NG变化=updatedNotes＆GT;＆LT; / textarea的＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /离子含量＆GT; ＆LT;按钮NG点击=saveNotes（注）＆GT;
＆LT; /按钮＆GT;
＆LT;离子/视图
想想NG-模型，以此来你的控制器变量连接到您的HTML，反之亦然。所以，如果你在你的控制器中设置$ scope.notes和你再使用大括号{{注意事项}}在HTML变量的内容将在你的HTML即显示出来。
控制器=>（必然）=>你的HTML（$ scope.notes）
但它是双向的（双向绑定）。所以，如果你在你的HTML中使用纳克的模式，现在会从输入字段的内容，并将其设置为您的控制器变量。你不必因为它是在角即后台完成做任何事情，如果你在你的文本区域它已经更新到控制器变量类型的Hello world。所以，你不需要它传回用。
控制器与LT =（绑定到）＆LT; = HTML（NG-模型=注意事项）
2路绑定有3件（非常简单）：
- 变量被设置在控制范围$。 $ scope.notes声明
该控制器内的保护伞任何code或HTML将有
访问变量 - 的$范围的变量连接到与NG-模型中的HTML元素。过度
简化NG-模型只是说，$ scope.notes变量连接
这个元素。我想起来了它作为您的HTML和Ctrl之间的管道
和你不需要动它作为变量内容是流
这两个由角之间的管理 - 使用{{}}解析（绑定）变量伸到UI即
{{注意事项}}表示表明变量 内容
2路的简单的例子约束力
＆LT;输入类型=文本NG模型=first.greeting＆GT;
＆LT; DIV纳克级=first.greeting＆GT;
{{first.greeting}} {{世界}} ＆LT; / DIV＆GT;
您code
//没有EED通过票据支持它已经有在你CTRL
//证明
.controller（'myController的'，['$范围'，函数（$范围）{
//如果你设置此字符串遗嘱是如何在你的textarea
$ scope.notes =设置指出双向绑定; //点击音符，它会抢劫无论你已经进入你的输入字段
$ scope.saveNotes =功能（）{
的console.log（'让我们检查，如果票据是在这里'，$ scope.notes）;
} }]） //请注意，如果你设置$ scope.notes =设置指出双向绑定;在你CTRL设置指出双向绑定遗嘱是如何在你的文本框
＆LT; TextArea类=笔记占位符=占位符文本的风格=高度：630像素; NG-模式=笔记＆GT;＆LT; / textarea的＆GT;
伞$范围的问题 - $范围没有连接到它的控制
现在，如果这已经是有道理的给你，你把它的所有设置和您仍然遇到问题，那么它很可能是你有$范围问题，即管道到控制器的连接断开。我认为这是从一个地区code移动到另一个即你每天拨打555，你飞到另一个状态，然后尝试使用555，但由于该地区code不起作用为$ 777。 scope.555将只与知道555.如果你是一个不同的状态（控制器）555意味着什么和角度在这种情况下，将丢弃的控制工作。它实际上并没有抛弃它只是假定你是聪明，拨打其他地方，它目前不知道的（如国际），所以它并将它传递假设系统中的一些地方会知道该怎么做555
实例能力范围断开连接
.controller（'的ProductsController'，['$范围'，函数（$范围）{
$ scope.product =我的产品; $ scope.saveProduct =功能（）{
的console.log（'让我们检查，如果产品是在这里'，$ scope.product）;
}
}]） .controller（'ReviewsController'，['$范围'，函数（$范围）{ }]） ＆LT; DIV NG控制器=的ProductsController＆GT;
///大量的HTML的东西
＆LT; / DIV＆GT;
＆LT; DIV NG控制器=ReviewsController＆GT;
//注：ProductsController的不再管理产品变量。 OtherStuffController目前拥有的所有变量的控制，它有没有产品变量
//这似乎合乎逻辑，但它发生的时间，特别是大型的HTML或在我的情况模板地狱:)有一些工具来帮助解决这个调试
＆LT; TextArea类=笔记占位符=占位符文本的风格=高度：630像素; NG-模式=产品＆GT;＆LT; / textarea的＆GT;
＆LT; / DIV＆GT;
I'm using this
<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea>
and from what I can understand ng-model="notes" means that the textarea is assigned whatever $scope.notes is. This works correctly, however whenever I edit the text in the textarea, isn't $scope.notes supposed to change as well?
When I use this button:
<button ng-click="saveNotes(notes)"></button>
The value of "notes" is always the original $scope.notes value and not the updated value.
Can someone tell me why this is?
Thanks
Edited to include html code:
<ion-view ng-controller="LectureCtrl" id="userMessagesView" view-title="{{lecture.title}}">
<ion-content>
<div style="position: absolute; top: 20px; left: 30px; right: 60px;">
<div style="height: 100%;">
<iframe class="video" width="560" height="315" src="{{lecture.youtubeLink}}" frameborder="0" allowfullscreen></iframe>
<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes" ng-change="updatedNotes"></textarea>
</div>
</div>
</ion-content>
<button ng-click="saveNotes(notes)">
</button>
<ion/view
Think of ng-model as a way to connect your controller variables to your HTML and vice versa. So if you set $scope.notes in your controller and your then use the curly brackets {{ notes }} in your html the variable content will show up in your html i.e.
Controller =>(bound to)=> your HTML ($scope.notes)
But it works both ways (2-way binding). So if you use ng-model in your HTML it will now take that content from the input field and set it to the variable in your controller. You don’t have to do anything as it is done in the background in Angular i.e. if you type in "Hello world" in your text area it is already updated to the variable in the controller. So you don’t need to pass it back with .
Controller <=(bound up to)<= HTML (ng-model="notes")
2-way binding has 3 parts (very simplified):
- variable is set with $scope in controller. $scope.notes declares that any code or HTML within the controllers "umbrella" will have access to the variable.
- connect the $scope variable to an HTML element with ng-model. Over simplified ng-model just says connect that $scope.notes variable to this element. I think it of it as a pipe between your HTML and ctrl and your don’t need to touch it as the variable content is flowing between the two managed by Angular
- use {{}} to parse (bind) the variable out into the UI i.e. {{notes}} says show the contents of that variables
SIMPLE EXAMPLE OF 2WAY BINDING
<input type="text" ng-model="first.greeting">
<div ng-class="first.greeting">
{{first.greeting}} {{"World"}}
</div>
YOUR CODE // No eed to pass notes back it already is there in your ctrl
// proof
.controller('MyController', ['$scope', function($scope) {
// if you set this up the string wills how up in your textarea
$scope.notes = "Set notes two way binding";
// click on notes and it will loot whatever you have entered into your input field
$scope.saveNotes = function() {
console.log('Lets check if notes is here', $scope.notes);
}
}])
// Note if you set $scope.notes = "Set notes two way binding"; in your ctrl the "Set notes two way binding" wills how up in your textbox
<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea>
"Umbrella" $scope problem – $scope is not connected to its controller
Now if this already makes sense to you and you have it all setup and you are still experiencing problems then it is most likely you have a $scope problem i.e. the "pipeline" to your controller is disconnected. I think of this as moving from one area code to another i.e. you dial 555 every day and you fly to another state and then try to use 555 but is doesn’t work as the area code is 777. $scope.555 will only work with a controller that knows about 555. If you are a different state (controller) 555 means nothing and Angular in this case will "discard it". It doesn’t actually discard it just assumes you are smart and dialing elsewhere that it doesn't currently know about (eg internationally) so it passes it along assuming that somewhere in the system something will know what to do with 555.
EXAMPLE OF SCOPE "DISCONNECT"
.controller('ProductsController', ['$scope', function($scope) {
$scope.product = "My product";
$scope.saveProduct = function() {
console.log('Lets check if product is here', $scope.product);
}
}])
.controller('ReviewsController', ['$scope', function($scope) {
}])
<div ng-controller="ProductsController">
/// lots of html stuff
</div>
<div ng-controller="ReviewsController">
// Note: ProductsController is no longer managing the product variable. OtherStuffController now has "control" of all variables and it has no product variable
// this seems logical but it happens all the time especially with large HTML or in my case template hell :) There are a number of tools to help with this debugging
<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="product"></textarea>
</div>
这篇关于在NG-模型值不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
