如果在控制器中調(diào)用JavaScript代碼中的全局對象window時,需要通過依賴注入的$window對象來替代window,即如果是window.alert(),應該將控制器的代碼修改為:$window.alert(),因為每一個控制器的代碼只是在它管轄的作用區(qū)域中使用。通過這樣的寫法,可以防止它與全局的window對象混淆,出現(xiàn)各類詭異的BUG異常。
? ? ? ? ?接下來,我們通過一個完整的示例,來介紹$window對象使用的過程。
示例2-2 $window窗口對象在表達式中的使用
(1) 功能描述
? ? ? ? 在頁面中,當點擊“顯示”按鈕時,調(diào)用控制器中的“show()”方法,以彈出窗口的方式顯示文本框中輸入的內(nèi)容。
(2) 實現(xiàn)代碼
? ? ? ? 新建一個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("您輸入的內(nèi)容是: " + $scope.text);
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
(3) 頁面效果
? ? ? ? 執(zhí)行HTML文件2-2.htm,l最終實現(xiàn)的頁面效果如下圖2-2所示。
圖2-2$window窗口對象在表達式中的使用
(4) 源碼分析
? ? ? ? 在本示例的代碼中,在自定義控制器函數(shù)c2_2時,多添加了一個$window對象,用于取代全局性的window對象。在使用時,可以像訪問window對象一樣,調(diào)用$window對象中各類方法或?qū)傩?,如alert、confirm等。另外,在代碼中,由于文本框與$scope的“text”屬性進行了數(shù)據(jù)綁定,因此,只要文本框輸入的內(nèi)容發(fā)生了變化,對應的$scope.text屬性值也隨之改變,所以,彈出的窗口能即時動態(tài)顯示在文本框中輸入的內(nèi)容值。