在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();
}
时间： 2024-11-09 10:27:18