第6节:$window窗口对象在表达式中的使用
如果在控制器中调用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属性值也随之改变,所以,弹出的窗口能即时动态显示在文本框中输入的内容值。