最近在开发项目的时候,发现了AngularJS一个很好玩的特性。我们知道AngularJS的scope存在父子关系,当我们通过scope.$apply()手动刷新子作用域的时候,父作用域也会被刷新;反过来也是如此。
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>ng-model</title>
<script src="angular-1.2.25.js"></script>
<script>
var outerScope = null;
var innerScope = null;
function outerController($scope)
{
outerScope = $scope;
outerScope.out = "out";
}
function innerController($scope)
{
innerScope = $scope;
innerScope.in = "in";
}
function outerFunc()
{
innerScope.in = "parent";
outerScope.out = "parent";
// 刷新父scope
outerScope.$apply();
}
function innerFunc()
{
innerScope.in = "child";
outerScope.out = "child";
// 刷新子scope
innerScope.$apply();
}
</script>
</head>
<body ng-controller="outerController">
{{out}}
<button οnclick="outerFunc();">outerFunc</button>
<div ng-controller="innerController">
{{in}}
<button οnclick="innerFunc();">innerFunc</button>
</div>
</body>
</html>