第6節(jié):$window窗口對象在表達式中的使用

如果在控制器中調(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)容值。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容