您的位置：首页 > 运维架构

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

2015-04-17 09:48 513 查看
在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();
}



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航