AngularJs有关双向绑定的小bug问题

最新推荐文章于 2018-12-12 14:34:00 发布
最新推荐文章于 2018-12-12 14:34:00 发布
阅读量371 收藏
点赞数 
<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular.js"></script>
</head>
<body>
<div ng-app="s9.app">
    <div ng-controller="MainController">
        <div><span ng-bind="name"></span></div>
        <div><input type="text" ng-model="name"></div>
        <hr>
        <div ng-controller="SubController">
            <input type="text" ng-model="name">
        </div>
    </div>
</div>
<script>
    var app = angular.module('s9.app', []);
    app.controller('MainController', function ($scope) {
        $scope['name'] = 'Main Controller Name';
    });
    app.controller('SubController', function ($scope) {
    })
</script>
</body>
</html></span>
<span style="font-size:18px;">以上代码出现bug，由于作用域的问题，改变第二个input输入框里的内容（</span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 18px;">在SubController的作用域</span><span style="font-size:18px;">）</span><span style="font-size:18px;">，<span style="font-family: Arial, Helvetica, sans-serif;">MainController作用</span></span>
<span style="font-size:18px;"><span style="font-family: Arial, Helvetica, sans-serif;"></span></span><pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:18px;">域</span>的</span><span style="font-size:18px; font-family: Arial, Helvetica, sans-serif;">内容不会改变，不能实现双向绑定。因为AngularJs是原型链的实现机制，因此改变外边的内容不能改变内部的</span>
<span style="font-size:18px; font-family: Arial, Helvetica, sans-serif;">内容。要实现双向绑定，就需要解决控制器数据的储存方式。</span>
 

<span style="font-size:18px;">bug的解决：</span>
 

<pre name="code" class="html"><span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular.js"></script>
</head>
<body>
<div ng-app="s9.app">
    <div ng-controller="MainController">
        <div><span ng-bind="data.name"></span></div>
        <div><input type="text" ng-model="data.name"></div>
        <hr>
        <div ng-controller="SubController">
            <input type="text" ng-model="data.name">
        </div>
    </div>
</div>
<script>
    var app = angular.module('s9.app', []);
    app.controller('MainController', function ($scope) {
//        $scope['name'] = 'Main Controller Name';
        $scope['data'] = {
            name : 'Main Controller Name'
        }
    });
    app.controller('SubController', function ($scope) {

    })
</script>
</body>
</html></span>
 

 

 

 

<span style="font-size:18px; font-family: Arial, Helvetica, sans-serif;">
</span>
 




                

        

        

    




    

      

        

            

              
                
                  hmlxb001068
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
angularjs随笔 -- 项目中使用 angularjs 踩过的坑

				
			

			

				

					loveEveryWeb的博客
				

				

					05-10
					
					339
					
				

			

		

		

			
				
项目中使用 angularjs 踩过的坑1. 双向数据绑定不生效 ？2. 设置的定时器，清不掉！！！3. $on 事件多次触发 ？4. 总结
框架虽好用，但是也会有各种坑，本人使用了 angularjs 框架两年多的时间，碰到过很多的问题，以下针对典型问题做分析共享：
1. 双向数据绑定不生效 ？
问题背景：
我明明采用了 ng-model 进行了数据绑定，js 逻辑修改了数据，但是页面就是没有刷新，甚至于我在控制台进行断点调试，发现数据逻辑都没有问题，页面元素就是不刷新。
解决方法：
// 脏检查机制没有

			
		

	



                

              
                



	

		

			

				
					
angularjs资源

				
			

			

				

					01-06
				

			

		

		

			
				
1. 双向数据绑定：AngularJS通过双向数据绑定实现了视图与模型的实时同步。这意味着当你在界面上进行操作时，模型会自动更新；同样，当模型发生变化时，界面也会实时更新。这大大简化了开发者的工作，使得代码更加...

			
		

	



                


  
              

                


	

		

			

				
					
angularjs ng-model不能实现双向绑定

				
			

			

				

					weixin_34343000的博客
				

				

					04-13
					
					183
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
Angular  解除双向绑定（适用Angular2+）

				
			

			

				

					WXF_Angular的博客
				

				

					01-17
					
					2262
					
				

			

		

		

			
				
1 . Angular的双向绑定，一直以来是Angular的一大特点，但凡是有利有弊。有时候需要绑定，有时候就需要解除
2 . 解除方法很简单，就是把数据先转化成JSON,再从JSON解析回来，即可解锁绑定，代码如下：
private DataA:string; //html界面用到的，已双向绑定的变量
private DateB:string;//需要得到DataA值，但解除双向绑定的变量

			
		

	



		

			
		



	

		

			

				
					
AngularJs directive-scope双向绑定方法处理-实例2

				
			

			

				

					天马3798
				

				

					06-16
					
					5045
					
				

			

		

		

			
				
1.Html代码：
    
        
            
            外部:
            
            
        
    
2.Js代码：
//定义模块，封装指令
angular.module('common', [])
.directive('myDirective', function () {
    return {
  

			
		

	





	

		

			

				
					
用angularjs遇到的坑们

				
			

			

				

					weixin_30747253的博客
				

				

					10-23
					
					101
					
				

			

		

		

			
				
最近在用angularjs做一些东西，由于学艺不精，对angularjs了解不够，导致经常会不小心掉进一些自己挖的坑里(⊙_⊙)，在这里记下来，谨防又踩。
1、angularjs ng-show not working
在页面中用到了pagination 分页插件

<pagination total-items="bigTotalItems" page="bigCurrentPag...

			
		

	





	

		

			

				
					
Angular沉思录（一）数据绑定

				
			

			

				

					飞鸟Blog
				

				

					05-07
					
					1291
					
				

			

		

		

			
				
接触AngularJS已经两年多了，时常问自己一些问题，如果是我实现它，会在哪些方面选择跟它相同的道路，哪些方面不同。为此，记录了一些思考，给自己回顾，也供他人参考。

初步大致有以下几个方面：

数据双向绑定视图模型的继承关系模块和依赖注入的设计待定

数据的双向绑定

Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界

			
		

	





	

		

			

				
					
bugfree-octo-bugfixes:AngularJS 第一个项目

				
			

			

				

					06-20
				

			

		

		

			
				
在AngularJS中，模型与视图之间的双向数据绑定使得当模型数据发生变化时，视图会自动更新，反之亦然，这大大减少了手动操作DOM的工作。  在项目开始时，你需要设置环境，这通常包括安装Node.js和npm（Node包管理器）...

			
		

	





	

		

			

				
					
AngularJS 1.5.8 api

				
			

			

				

					07-28
				

			

		

		

			
				
 AngularJS的核心特性之一是双向数据绑定，它自动保持模型和视图之间的同步。例如，`{{ }}`表达式用于显示模型的值。  7. **过滤器（Filters）**  过滤器用于格式化或转换数据，如`currency`用于货币格式化，`date`...

			
		

	





	

		

			

				
					
AngularJS 1.2.22

				
			

			

				

					08-14
				

			

		

		

			
				
首先，AngularJS的核心特性之一是双向数据绑定，这使得视图和模型之间的数据同步变得极其简单。在AngularJS 1.2.22中，当你在模型中进行更改时，这些更改会立即反映到视图中，反之亦然。这种机制减少了开发者手动...

			
		

	





	

		

			

				
					
angularjs1.6.1

				
			

			

				

					02-03
				

			

		

		

			
				
5. **数据绑定**：双向数据绑定是AngularJS的标志性特性，1.6.1版本进一步优化了这一过程，使得视图和模型之间的同步更加高效。  6. **服务**：AngularJS的服务是可注入的对象，用于封装应用中的功能，如$http服务...

			
		

	





	

		

			

				
					
angularjs input ng-model 双向绑定无效的问题

				
			

			

				

					hangdianyizhihua的专栏
				

				

					10-26
					
					7164
					
				

			

		

		

			
				
我怀疑你这是被 scope 的原型继承坑了


这是我常用的解决方案：


$scope.ctrlScope = $scope

			
		

	





	

		

			

				
					
解决：angular js模板中无法使用ueditor的问题

				
			

			

				

					阿超的博客
				

				

					04-11
					
					1434
					
				

			

		

		

			
				
什么是ueidtor 
由百度开发的的一个开源的富文本编辑器
为什么无法使用 
使用ueditor时，需要用到标签初始化，但是这在angular js模板中无法使用的。
如何解决:angular-ueditor： 
angular-ueditor 是一款整合了 angular 和 UEditor 的插件。目的是为了更方便的在angular基础上使用UEditor。
需要导入的JS文件
<script

			
		

	





	

		

			

				
					
UEditor+angular使用踩坑记录

				
			

			

				

					wiki_Wei的博客
				

				

					11-20
					
					2030
					
				

			

		

		

			
				
背景：使用UEditor+angular-ueditor.js实现富文本框的功能。

坑一、使用shift+内容输入字符时，不会触发angular的双向同步。原因是ueditor中，shift+输入不会触发"contentChange"事件。

坑二、使用上传图片功能时，后台获取到数据为有‘正在上传’提示。原因ueditor上传图片成功之后，只用js替换img元素的src指向，这时富文本框中的内容...

			
		

	





	

		

			

				
					
Angular双向绑定无法解决的数据实时更新

				
			

			

				

					flyhorse1010的专栏
				

				

					04-27
					
					5248
					
				

			

		

		

			
				
多数情况下,双向绑定就可以实时更新,但也有仅仅靠双向绑定无法实时更新的问题(比如引用第3方库的作用域内、定时器的作用域内）。早期的angular提供了$scope.apply()来解决这个问题。高版本的angular提供了ChangeDetectorRef服务来解决（在@angular/core内)；官网资料链接其他资料链接...

			
		

	





	

		

			

				
					
jquery 更改angularJS input 内容导致绑定失效的解决办法

				
			

			

				

					mingjie1212的博客
				

				

					06-28
					
					4024
					
				

			

		

		

			
				
在使用greasemonkey过程中，对angularJS框架的WEB 进行自动表单提交动作。


发现JQuery的对inputd的val()赋值操作会使原有的angularJS的绑定验证操作失效。


虽然我在赋值的同时使用的jQuery的change 和trigger方法都没有效果。


查找stackoverflow上看到一个人的情况与我类似，并且下面的解决办法我经过测试

			
		

	





	

		

			

				
					
使用angularjs过程中遇到的bug

				
			

			

				

					timeless的博客
				

				

					12-05
					
					1468
					
				

			

		

		

			
				
遇到一个bug，代码如下
选项:
    
      选项内容:
      
      选择此选项是否让被调查者继续回答下一题:
      
      
      此选项是否由被调查者自行输入:
      
      
      
        是否跳题至Group1:
        
      
      
        删除该选项

			
		

	





	

		

			

				
					
angular双向绑定无效果，ng-model不能正常显示

				
			

			

				

					一生为追梦的博客
				

				

					06-07
					
					5928
					
				

			

		

		

			
				
今天遇到了个问题，js代码中变量已经变化了，但是html页面中没有正常的显示出来。代码如下：&lt;input type="text" ng-model="paramValue" auto-focus&gt;$scope.paramValue = param;以上代码就会造成有时input框中无内容的情况，打断点显示$scope.paramValue是有值的，但是页面就是啥都显示不出来。换成下边代...

			
		

	





	

		

			

				
					
数据双向绑定页面无反应（angularjs）

				
			

			

				

					dianchou8532的博客
				

				

					12-12
					
					420
					
				

			

		

		

			
				
问题引入
使用 angularjs进行过一段时间的开发后，基本上都会遇到一个这样的坑：页面进行了双向数据绑定，控制层的数据也已经改变了，但是视图层的数据却没有改变。
其实造成这个问题的原因大致分为以下几个

scope作用域发生的继承
操作了dom层，数据更改，却没有触发angularjs的服务。没有更新视图层。

scope作用域的继承
先看个实例。

<di...

			
		

	





	

		

			

				
					
AngularJS学习笔记：数据双向绑定与应用开发

				
			

			

				

					
				

			

		

		

			
				
AngularJS的核心特性之一是数据双向绑定，它将数据与视图紧密相连，当数据发生变化时，视图会自动更新，反之亦然。这种机制简化了前端应用的维护工作，同时与jQuery兼容，即使没有jQuery，AngularJS也包含了一个轻量...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值