ng-model 中的值不更新 [英] Value in ng-model doesn't update 查看：29 发布时间：2021/11/10 2:47:25 javascript angularjs angular-ngmodel angularjs-ng-model 本文介绍了ng-model 中的值不更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在使用这个</pre><p>据我所知 ng-model="notes" 意味着 textarea 被分配到任何 $scope.notes 是.这工作正常，但是每当我编辑 textarea 中的文本时，$scope.notes 不应该也改变吗?</p><p>当我使用这个按钮时:</p><pre><code><button ng-click="saveNotes(notes)"></button></code></pre><p>notes"的值始终是原始的 $scope.notes 值，而不是更新后的值.</p><p>谁能告诉我这是为什么?</p><p>谢谢</p><p>编辑以包含 html 代码:</p><pre><code><ion-view ng-controller="LectureCtrl" id="userMessagesView" view-title="{{lecture.title}}"><离子含量><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><p></div><p></离子含量><button ng-click="saveNotes(notes)"></按钮><离子/视图</code></pre><p></p><div class="h2_lin"> 解决方案 </div><p>将 ng-model 视为一种将控制器变量连接到 HTML 的方式，反之亦然.因此，如果您在控制器中设置 $scope.notes 然后在您的 html 中使用大括号 {{ notes }}，则变量内容将显示在您的 html 中，即</p><p>Controller =>(bound to)=> 你的 HTML ($scope.notes)</p><p>但它是双向的(2 路绑定).因此，如果您在 HTML 中使用 ng-model，它现在将从输入字段中获取该内容并将其设置为控制器中的变量.你不需要做任何事情，因为它是在 Angular 的后台完成的，即如果你在文本区域输入Hello world"，它已经更新为控制器中的变量.所以你不需要用 .</p><p>控制器 <=(绑定到)<= HTML (ng-model="notes")</p><p>2-way 绑定有 3 个部分(非常简化):</p><ol><li> 变量在控制器中使用 $scope 设置.$scope.notes 声明控制器伞"中的任何代码或 HTML 将具有访问变量.</li><li>使用 ng-model 将 $scope 变量连接到 HTML 元素.超过简化的 ng-model 只是说将 $scope.notes 变量连接到这个元素.我认为它是 HTML 和 ctrl 之间的管道并且您无需触摸它，因为可变内容正在流动两者之间由 Angular 管理</li><li>使用 {{}} 将变量解析(绑定)到 UI 中，即{{notes}} 表示显示变量的内容</li></ol><p>2WAY 绑定的简单示例</p><pre><code> <input type="text" ng-model="first.greeting"><div ng-class="first.greeting">{{first.greeting}} {{"World"}}</div><p></code></pre><p>您的代码//不需要将笔记传回它已经在你的 ctrl 中了</p><pre><code>//证明.controller('MyController', ['$scope', function($scope) {//如果你设置了这个字符串会在你的 textarea 中如何设置$scope.notes = "设置笔记双向绑定";//点击笔记，它会掠夺你在输入字段中输入的任何内容$scope.saveNotes = function() {console.log('让我们检查一下这里是否有笔记', $scope.notes);}}])//注意是否设置了 $scope.notes = "Set notes two way binding";在您的 ctrl 中，设置笔记双向绑定"将显示您的文本框中的内容<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;"ng-model="notes"></textarea></code></pre><p><strong>Umbrella"$scope 问题 – $scope 未连接到其控制器</strong> </p><p>现在，如果这对您来说已经有意义并且您已经完成了所有设置并且您仍然遇到问题，那么很可能您遇到了 $scope 问题，即控制器的管道"断开连接.我认为这是从一个区号移动到另一个区号，即你每天拨打 555，然后你飞到另一个州，然后尝试使用 555 但它不起作用，因为区号是 777. $scope.555 只能工作使用一个知道 555 的控制器.如果你是一个不同的状态(控制器)555 没有任何意义，在这种情况下 Angular 将丢弃它".它实际上并没有丢弃它只是假设你很聪明并且在它目前不知道的其他地方(例如国际)拨号，所以它假设系统中的某个地方知道如何处理 555.</p><p>范围示例断开连接"</p><pre><code> .controller('ProductsController', ['$scope', function($scope) {$scope.product = "我的产品";$scope.saveProduct = function() {console.log('让我们检查产品是否在这里', $scope.product);}}]).controller('ReviewsController', ['$scope', function($scope) {}])<div ng-controller="ProductsController">///很多 html 的东西</div><p><div ng-controller="ReviewsController">//注意:ProductsController 不再管理产品变量.OtherStuffController 现在可以控制"所有变量，并且没有产品变量//这似乎是合乎逻辑的，但它总是发生，尤其是对于大 HTML 或在我的情况下模板地狱:) 有许多工具可以帮助进行此调试<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;"ng-model="product"></textarea></div><p></code></pre><p><p>I'm using this </p><pre><code><textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea> </code></pre><p>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?</p> <p>When I use this button: </p><pre><code><button ng-click="saveNotes(notes)"></button> </code></pre><p>The value of "notes" is always the original $scope.notes value and not the updated value.</p> <p>Can someone tell me why this is? </p> <p>Thanks</p> <p>Edited to include html code:</p><pre><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 </code></pre><p> </p><div class="h2_lin"> 解决方案 </div><p>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.</p> <p>Controller =>(bound to)=> your HTML ($scope.notes)</p> <p>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 . </p> <p>Controller <=(bound up to)<= HTML (ng-model="notes")</p> <p>2-way binding has 3 parts (very simplified):</p><ol> <li>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.</li> <li>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</li> <li>use {{}} to parse (bind) the variable out into the UI i.e. {{notes}} says show the contents of that variables</li> </ol><p>SIMPLE EXAMPLE OF 2WAY BINDING</p><pre><code> <input type="text" ng-model="first.greeting"> <div ng-class="first.greeting"> {{first.greeting}} {{"World"}} </div> </code></pre><p>YOUR CODE // No eed to pass notes back it already is there in your ctrl </p><pre><code> // 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> </code></pre><p><strong>"Umbrella" $scope problem – $scope is not connected to its controller</strong> </p> <p>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. </p> <p>EXAMPLE OF SCOPE "DISCONNECT"</p><pre><code> .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> </code></pre><p> <p>这篇关于ng-model 中的值不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2530063');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="ng-model不更新AngularJS" href="/2178887.html"> ng-model不更新AngularJS; </a> </li> <li> <a target="_blank" title="Ng-model 不更新控制器值" href="/2520817.html"> Ng-model 不更新控制器值; </a> </li> <li> <a target="_blank" title="Ng-model 不更新控制器值" href="/2529945.html"> Ng-model 不更新控制器值; </a> </li> <li> <a target="_blank" title="javascript - angular ng-model 绑定的值不更新" href="/728446.html"> javascript - angular ng-model 绑定的值不更新; </a> </li> <li> <a target="_blank" title="Ng-model不更新控制器的值" href="/602775.html"> Ng-model不更新控制器的值; </a> </li> <li> <a target="_blank" title="如何让 ng-model 不立即更新?" href="/2522089.html"> 如何让 ng-model 不立即更新?; </a> </li> <li> <a target="_blank" title="Angularjs:在更新 ng-model 时选择不更新" href="/2529955.html"> Angularjs:在更新 ng-model 时选择不更新; </a> </li> <li> <a target="_blank" title="Angularjs:在更新 ng-model 时选择不更新" href="/2522426.html"> Angularjs:在更新 ng-model 时选择不更新; </a> </li> <li> <a target="_blank" title="为什么ng-model不更新控制器值select？" href="/872938.html"> 为什么ng-model不更新控制器值select？; </a> </li> <li> <a target="_blank" title="Angularjs ng-model 在 ng-repeat 中通过 (key,val) 不更新" href="/2522569.html"> Angularjs ng-model 在 ng-repeat 中通过 (key,val) 不更新; </a> </li> <li> <a target="_blank" title="ng-model 未在 Modal 内更新" href="/2525225.html"> ng-model 未在 Modal 内更新; </a> </li> <li> <a target="_blank" title="angularjs - ng-switch 不绑定 ng-model" href="/2521245.html"> angularjs - ng-switch 不绑定 ng-model; </a> </li> <li> <a target="_blank" title="如何在 ng-repeat 中动态更新 ng-model?" href="/2526625.html"> 如何在 ng-repeat 中动态更新 ng-model?; </a> </li> <li> <a target="_blank" title="Angularjs。在datepicker中没有更新ng-model" href="/1021587.html"> Angularjs。在datepicker中没有更新ng-model; </a> </li> <li> <a target="_blank" title="AngularJS:为什么 ng-model 值不在范围变量中更新" href="/2527663.html"> AngularJS:为什么 ng-model 值不在范围变量中更新; </a> </li> <li> <a target="_blank" title="AngularJS:为什么 ng-model 值不在范围变量中更新" href="/2525280.html"> AngularJS:为什么 ng-model 值不在范围变量中更新; </a> </li> <li> <a target="_blank" title="使用 ng-model 值过滤 ng-repeat" href="/2526849.html"> 使用 ng-model 值过滤 ng-repeat; </a> </li> <li> <a target="_blank" title="使用ng-model值过滤ng-repeat" href="/1681463.html"> 使用ng-model值过滤ng-repeat; </a> </li> <li> <a target="_blank" title="ng-model在Modal内部未更新" href="/1927717.html"> ng-model在Modal内部未更新; </a> </li> <li> <a target="_blank" title="ng-model没有在范围之外更新" href="/1014323.html"> ng-model没有在范围之外更新; </a> </li> <li> <a target="_blank" title="ng-model 没有在范围之外更新" href="/2524028.html"> ng-model 没有在范围之外更新; </a> </li> <li> <a target="_blank" title="AngularJs - SELECT 中的 ng-model" href="/2524142.html"> AngularJs - SELECT 中的 ng-model; </a> </li> <li> <a target="_blank" title="AngularJs - 选择中的 ng-model" href="/2529967.html"> AngularJs - 选择中的 ng-model; </a> </li> <li> <a target="_blank" title="AngularJS:ng-repeat 中的 ng-model?" href="/2524714.html"> AngularJS:ng-repeat 中的 ng-model?; </a> </li> <li> <a target="_blank" title="AngularJS:ng-repeat 中的 ng-model?" href="/2526482.html"> AngularJS:ng-repeat 中的 ng-model?; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = 'ng-model,中,的,值,不,更新'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section> <!--统计代码--> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>
