AngularJs学习第五篇从Controller控制器谈谈$scope作用

AngularJS中的控制器与$scope作用域

在AngularJS中，控制器是应用的重要组成部分，它允许我们定义特定区域的功能和行为。而$scope则是控制器与视图之间的桥梁，它提供了数据绑定和事件处理的功能。接下来，我们将从创建控制器开始，深入$scope的作用域。

一、创建控制器

在AngularJS中创建控制器非常简单。我们可以通过定义一个JavaScript函数并将其注册到AngularJS模块中来创建一个新的控制器。如下面的示例所示：

```html

```

在这个例子中，我们创建了一个名为defaultCtrl的控制器，并通过ng-controller指令将其应用于HTML的body元素。控制器中的$scope对象提供了一个setInput方法，该方法会在点击按钮时被调用，并将输入的值打印到控制台。

二、多个控制器与作用域问题

在AngularJS中，每个控制器都有自己的作用域。当我们在页面中定义多个控制器时，每个控制器都会在其自己的作用域内工作。这意味着它们不会相互干扰，每个控制器都可以独立地处理自己的数据和事件。

如果我们想要在两个不同的div元素中使用同一个控制器，我们可以将ng-controller指令应用于每个div元素，如下所示：

```html

defaultCtrl控制器：跨作用域的数据交互

在AngularJS应用中，当我们使用同一个控制器处理不同的作用域时，可能会遇到数据交互的问题。假设我们在第一个input标签中输入内容，并希望通过点击第二个控制器的button按钮来实现某些功能，结果会如你所期望吗？

实际上，由于作用域的不同，直接操作可能会导致未定义的结果。每个通过工厂函数创建的作用域都是独立的。那么，如何在不同的作用域之间进行访问和交互呢？在AngularJS中，$rootScope扮演了一个关键角色。

有三个重要的方法需要了解：

1. $on(name, handler)：注册一个事件处理函数，该函数在特定的事件被当前作用域收到时将被调用。

2. $emit(name, args)：向当前父作用域发送一个事件，直至根作用域。

3. $broadcast(name, args)：向当前作用域下的子作用域发送一个事件，参数是事件名称以及一个用于向事件提供额外数据的对象。

让我们通过修改代码来展示如何使用这些方法。假设我们有一个名为“exampleApp”的模块和一个名为“defaultCtrl”的控制器：

```javascript

angular.module("exampleApp", [])

.controller("defaultCtrl", function ($scope, $rootScope) {

$scope.$on("UpdateValue", function (event, args) {

$scopeput = args.zip; // 当收到UpdateValue事件时更新input的值

});

$scope.setInput = function (value) {

$rootScope.$broadcast("UpdateValue", { zip: value }); // 广播UpdateValue事件并传递数据

console.log("print: " + $scopeput); // 打印更新后的值

};

$scope.copy = function () {

console.log("copy: " + $scopeput); // 打印当前input的值

};

});

```

在HTML部分，我们有一个包含输入字段和按钮的表单：

```html

```

通过这段代码，当你在输入字段中输入内容并点击“Copy”按钮时，将会触发`copy`函数并打印当前`input`的值。通过使用`$broadcast`方法，你可以将事件和数据发送到子作用域，然后在子作用域中使用`$on`方法来监听和处理这个事件。这样，即使在不同的作用域中，也可以通过事件和数据进行交互。你还可以利用$rootScope的继承特性来传递数据和方法。在这段代码中，我们只是展示了其中一个可能的应用场景。AngularJS提供了丰富的工具和机制来处理复杂的数据交互和作用域问题。通过深入了解并合理使用这些工具，你可以构建出功能强大、结构清晰的应用。