除了可以通过初始化的的方式为$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所示。
网友评论