简媒

第9节:添加$scope对象方法

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

除了可以通过初始化的的方式为$scope对象添加属性之外,还可以为$scope对象添加方法,并依靠这些定义的方法来满足视图层中逻辑处理和事件执行的需要。在添加完$scope对象的方法函数之后,在视图层中,就可以像绑定属性一样,通过表达式的方式绑定这些函数,处理业务逻辑需求,也可以通过Angular的事件处理器,将执行的事件(如ng-click)绑定给这些函数,用来实现事件触发时需要完成的功能需求。

        接下来我们分别通过两个示例来介绍添加并执行$scope对象方法的过程。

        示例2-5 通过表达式绑定$scope对象的方法

(1) 功能描述

        在示例2-4的基础上向$scope对象添加一个名为“span_show()”的方法函数,在该函数中,先重置$scope对象的“text”属性值,并通过return方法返回重置后的内容值;在页面中,通过Angular表达式绑定$scope对象中的“span_show()”函数,显示重置后返回的内容。

(2) 实现代码

        新建一个HTML文件2-5.html,加入如代码清单2-5所示的代码。

        代码清单2-5 控制器初始化$scope对象

<!doctype html>

<html ng-app="a2_5">

<head>

    <title>通过表达式绑定$scope对象的方法</title>

    <script src="../Script/angular.min.js" 

            type="text/javascript"></script>

</head>

<body>

    <div ng-controller="c2_5">

        <span class="show">{{span_show()}}</span>

    </div>

    <script type="text/javascript">

        var a2_5 = angular.module('a2_5', []);

        a2_5.controller('c2_5', ['$scope', function ($scope) {

            $scope.text = 'Hello!Angular';

            $scope.span_show = function () {

                $scope.text = "欢迎来到 Angular 的精彩世界!";

                return $scope.text;

            };

        }]);

    </script>

</body>

</html>

(3) 页面效果

        执行HTML文件2-5.html,最终实现的页面效果如下图2-5所示。

图2-5通过表达式绑定$scope对象的方法

(4) 源码分析

        在本示例的源码中,当构建名为“c2_5”的控制器时,除添加“text”属性外,还向$scope对象添加了一个名为“span_show”的方法。该方法是一个自定义的函数,在函数中先重新设置了$scope对象的“text”属性值,再通过return语句返回重置后的属性值。

       为了能在页面中执行在控制器中定义的“span_show”方法,在双花括号中以表达式的方式直接调用方法名称,因为调用该方法将返回重置后的$scope对象的“text”属性值,所以,在页面的<span>元素中,显示$scope对象被重置后的字符内容,完整效果如图2-5所示。

上一篇下一篇

猜你喜欢

热点阅读