标签: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