如果在控制器中调用JavaScript代码中的全局对象window时，需要通过依赖注入的$window对象来替代window，即如果是window.alert()，应该将控制器的代码修改为：$window.alert()，因为每一个控制器的代码只是在它管辖的作用区域中使用。通过这样的写法，可以防止它与全局的window对象混淆，出现各类诡异的BUG异常。
接下来，我们通过一个完整的示例，来介绍$window对象使用的过程。
示例2-2 $window窗口对象在表达式中的使用
(1) 功能描述
在页面中，当点击“显示”按钮时，调用控制器中的“show()”方法，以弹出窗口的方式显示文本框中输入的内容。
(2) 实现代码
新建一个HTML文件2-2.html，加入如代码清单2-2所示的代码。
代码清单2-2 $window窗口对象在表达式中的使用
<!doctype html>
<html ng-app>
<head>
<title>$window窗口对象在表达式中的使用</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
</head>
<body>
<div ng-controller="c2_2">
<input type='text' ng-model="text" />
<button ng-click="show()">显示</button>
</div>
<script type="text/javascript">
function c2_2($window, $scope) {
$scope.text = "";
$scope.show = function () {
$window.alert("您输入的内容是: " + $scope.text);
}
}
</script>
</body>
</html>
(3) 页面效果
执行HTML文件2-2.htm，l最终实现的页面效果如下图2-2所示。
图2-2$window窗口对象在表达式中的使用
(4) 源码分析
在本示例的代码中，在自定义控制器函数c2_2时，多添加了一个$window对象，用于取代全局性的window对象。在使用时，可以像访问window对象一样，调用$window对象中各类方法或属性，如alert、confirm等。另外，在代码中，由于文本框与$scope的“text”属性进行了数据绑定，因此，只要文本框输入的内容发生了变化，对应的$scope.text属性值也随之改变，所以，弹出的窗口能即时动态显示在文本框中输入的内容值。
网友评论