简媒

第6节:$window窗口对象在表达式中的使用

2020-03-07  本文已影响0人  程序世界

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

上一篇 下一篇

猜你喜欢

热点阅读