码迷,mamicode.com
首页 > 其他好文 > 详细

(十五)在controller之外修改$scope中的数据,双向绑定特性失效,不能自动刷新

时间:2015-04-17 11:29:47      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:angularjs双向绑定失效   scope数据不能自动刷新   如何获得angularjs中的scope   

在angularjs中通过angular.element(dom).scope()可以拿到某个dom元素关联的作用域,从而可以访问$scope中的属性和方法。但是在ng-controller函数之外修改$scope中的数据,angular的$scope是不会自动刷新的,即双向绑定特性失效。

<html>
  <head>
    <script src="angular-1.3.15.js"></script>
	<script>
        var app = angular.module('app', []);  
        app.controller("myController",function($scope){
			$scope.buttonAdisable = true;
			$scope.buttonBdisable = true;
			
			//让a按钮可用
			$scope.enableA=function(){
				$scope.buttonAdisable=false;
			};
		});  
   
		// 启动模块
        angular.element(document).ready(function() {  
              angular.bootstrap(document.getElementById("root_div"),["app"]); 
        }); 
	 
		// 让b按钮可用
		function enableB()
		{
			var scope = angular.element(document.getElementById('b')).scope();
			scope.buttonBdisable=false;
		}
	</script>
  </head>
  <body>
		<div id="root_div" ng-controller="myController">
			<input type="button" value="a" id="a" ng-disabled="buttonAdisable"/>	
			<input type="button" value="b" id="b" ng-disabled="buttonBdisable"/>
			<br/>
			<input type="button" value="enable-a" ng-click="enableA();"/>	
		</div>
		<input type="button" value="enable-b" onclick="enableB();"/>
  </body>
</head>


在浏览器运行这段代码:默认按钮a和b都是disabled状态,点击enable-a可以让a按钮变成enable,但是点击enable-b按钮b按钮仍然处于disabled状态。对比enableA和enableB函数,可以看到其实2者功能是一样的,实现方式也是一样的,唯一的差别在于enableA处于controller范围之内,而enableB则是在controller函数之外。


使用angularjs,我们的数据和方法都是封装在$scope中的,但是总有那么一些特殊情况让我们不得不自己获取$scope然后调用方法或者修改属性,这个时候我们就面临双向绑定失效的问题了。不知道这是不是angularjs的bug,如果要解决这个问题。我们可以自己手动调用$scope.$digest()来触发脏值检测,这样就可以实现$scopes中的数据刷新了。

对应上面的代码,我们只要修改enbaleB就可以完成需要的功能。

function enableB()
{
	var scope = angular.element(document.getElementById('b')).scope();
	scope.buttonBdisable=false;
	scope.$digest();
}




(十五)在controller之外修改$scope中的数据,双向绑定特性失效,不能自动刷新

标签:angularjs双向绑定失效   scope数据不能自动刷新   如何获得angularjs中的scope   

原文地址:http://blog.csdn.net/aitangyong/article/details/45092271

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!