AngularJS 的 Scope 与 Controller 交互-JavaScript中文网-JavaScript教程资源分享门户

前言

AngularJS 是一款非常流行的前端框架，它提供了一套完整的 MVC 架构，并且使用双向数据绑定的方式使得前端开发变得更加方便。在 AngularJS 中，Scope 和 Controller 是两个非常重要的概念，它们之间的交互也是我们在开发中需要重点关注的部分。本文将详细介绍 AngularJS 中 Scope 和 Controller 的交互方式，希望能够帮助读者更好的理解和使用 AngularJS。

Scope 和 Controller 的关系

在 AngularJS 中，每个视图都会有一个 Scope，它是视图和 Controller 之间的桥梁。Scope 用于存储视图中的数据，并且提供了一些方法使得数据可以传递到 Controller 中。而 Controller 则是用来控制视图的行为和逻辑的，它可以访问 Scope 中的数据，并且通过一些方法来更改数据，从而实现视图的动态更新。

下面是一个简单的示例，展示了 Scope 和 Controller 之间的关系：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Scope and Controller</title>
    <script src="https://code.angularjs.org/1.7.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <input type="text" ng-model="message">
    <button ng-click="showMessage()">Show Message</button>
    <br>
    <p>{{messageToShow}}</p>
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.message = '';
        $scope.showMessage = function() {
            $scope.messageToShow = $scope.message;
        };
    });
</script>
</html>

在这个示例中，我们创建了一个名为 myApp 的 AngularJS 应用，然后在 body 元素上使用了 ng-controller 指令来指定该视图使用 myCtrl 这个 Controller。在视图中，我们使用了 ng-model 指令来绑定一个输入框和 Scope 中的 message 变量，同时使用了 ng-click 指令来绑定一个按钮和 showMessage 方法。在 Controller 中，我们首先定义了一个 $scope.message 变量，并且定义了一个 showMessage 方法，该方法用于将 $scope.message 的值赋值给 $scope.messageToShow 变量。在视图中，我们使用了 {{messageToShow}} 来显示 $scope.messageToShow 的值。

当我们在输入框中输入一些内容，然后点击按钮时，会调用 showMessage 方法，该方法会将 $scope.message 的值赋值给 $scope.messageToShow 变量，然后在视图中显示出来。这个过程中，Scope 和 Controller 之间的交互就发挥了重要作用。

Scope 的属性和方法

在 AngularJS 中，Scope 提供了一些属性和方法，用于实现和 Controller 的交互。下面是一些常用的属性和方法：

$scope.$watch

$scope.$watch 方法用于监控 Scope 中某个变量的变化，并且在变化时执行一些操作。该方法接受两个参数，第一个参数是要监控的变量名，第二个参数是一个回调函数，该函数会在变量发生变化时被调用。

下面是一个示例，展示了如何使用 $scope.$watch 方法来监控 Scope 中的变量：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Scope and Controller</title>
    <script src="https://code.angularjs.org/1.7.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <input type="text" ng-model="message">
    <br>
    <p>{{messageLength}}</p>
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.message = '';
        $scope.$watch('message', function(newValue, oldValue) {
            $scope.messageLength = newValue.length;
        });
    });
</script>
</html>

在这个示例中，我们使用了 $scope.$watch 方法来监控 $scope.message 的变化。当 $scope.message 的值发生变化时，回调函数会被调用，该函数会将 $scope.message 的长度赋值给 $scope.messageLength 变量，从而实现了动态更新。

$scope.$apply

$scope.$apply 方法用于强制更新 Scope 中的变量，并且通知 AngularJS 框架进行数据绑定和视图更新。该方法通常用于在异步操作中更新 Scope 中的变量。

下面是一个示例，展示了如何使用 $scope.$apply 方法来更新 Scope 中的变量：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Scope and Controller</title>
    <script src="https://code.angularjs.org/1.7.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <button ng-click="updateMessage()">Update Message</button>
    <br>
    <p>{{message}}</p>
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.message = '';
        $scope.updateMessage = function() {
            setTimeout(function() {
                $scope.$apply(function() {
                    $scope.message = 'Hello World';
                });
            }, 1000);
        };
    });
</script>
</html>

在这个示例中，我们定义了一个 updateMessage 方法，该方法会在 1 秒后将 $scope.message 的值赋值为 'Hello World'。由于 setTimeout 方法是异步的，因此我们需要使用 $scope.$apply 方法来强制更新 Scope 中的变量，并且通知 AngularJS 框架进行数据绑定和视图更新。

$scope.$emit 和 $scope.$broadcast

$scope.$emit 方法用于向父级 Scope 发送事件，而 $scope.$broadcast 方法用于向子级 Scope 发送事件。这两个方法都接受两个参数，第一个参数是事件名称，第二个参数是事件数据。

下面是一个示例，展示了如何使用 $scope.$emit 和 $scope.$broadcast 方法来发送事件：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Scope and Controller</title>
    <script src="https://code.angularjs.org/1.7.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <button ng-click="sendMessage()">Send Message</button>
    <br>
    <p>{{message}}</p>
    <div ng-controller="myChildCtrl">
        <p>{{message}}</p>
    </div>
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.message = '';
        $scope.sendMessage = function() {
            $scope.$broadcast('myEvent', 'Hello World');
        };
        $scope.$on('myEvent', function(event, data) {
            $scope.message = data;
        });
    });
    app.controller('myChildCtrl', function($scope) {
        $scope.message = '';
        $scope.$on('myEvent', function(event, data) {
            $scope.message = data;
        });
    });
</script>
</html>

在这个示例中，我们定义了两个 Controller，一个是 myCtrl，一个是 myChildCtrl。在 myCtrl 中，我们定义了一个 sendMessage 方法，该方法会使用 $scope.$broadcast 方法向子级 Scope 发送 myEvent 事件，并且传递了一个字符串数据 'Hello World'。在 myChildCtrl 中，我们使用 $scope.$on 方法监听 myEvent 事件，并且在事件被触发时将事件数据赋值给 $scope.message 变量。在视图中，我们分别显示了两个 Scope 中的 $scope.message 变量，从而展示了事件的传递过程。

总结

在本文中，我们详细介绍了 AngularJS 中 Scope 和 Controller 的交互方式，并且展示了一些常用的属性和方法。通过学习本文，读者可以更好地理解和使用 AngularJS，并且在实际开发中能够更加高效地使用 Scope 和 Controller 来实现视图的动态更新和事件的传递。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655c4c93d2f5e1655d6669d3