在 AngularJS 中的控制器之间共享数据

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

在 AngularJS 中的控制器之间共享数据

作者：迹忆客最近更新：2023/05/09 浏览次数：

我们可以使用几种方法在 AngularJS 中的控制器之间共享数据，但这里我们只讨论两种方式。第一种方法是范围变量。第二种方法是使用工厂或服务。

在 AngularJS 中的父子控制器之间共享数据

子控制器的作用域继承父控制器的作用域，允许通过使用控制器继承简单地共享数据。

当子组件嵌套在父组件中时，子组件可以访问父组件的数据。

这是通过使用双向数据绑定来实现的。父组件可以使用属性绑定或事件绑定将数据传递给子组件。

然后，子级可以使用其控制器上的属性绑定或事件绑定将此数据传递回父级。此模式还用于在相关组件之间共享选择。

范围对象

范围对象是在实例化控制器时创建的，它包含模型和视图属性。

模型属性保存或存储与其他控制器共享的任何信息。另一方面，视图属性具有或存储有关在屏幕上显示此信息的信息（例如 HTML）。

在 AngularJS 中使用工厂或服务在控制器之间共享数据

在 AngularJS 中，我们可以使用工厂或服务在控制器之间共享数据。

工厂返回一个对象，其中包含创建和更新对象的方法。当我们想在一个控制器中创建一个新对象并与另一个控制器共享时，我们可以使用工厂。

当我们想要在控制器和其他 JavaScript 文件之间共享数据时使用服务。

总之，AngularJS 工厂和服务是执行特定目的并包含方法和属性的 JS 模块。

它们可以通过依赖注入注入到其他组件中。我们可以在工厂中定义一个共享变量，将其注入两个控制器，并在此方法中将作用域变量链接到工厂数据。

我们必须遵循以下步骤。

下面是一个示例，可帮助我们了解如何使用上述两种方式在控制器之间共享数据。

JavaScript 代码：

var myApp = angular.module('myApp', []);
myApp.service('demo', [function () {
    'use strict';
    this.pointtot = {hello: 'Adil'};
}]);
myApp.controller('Ctrl1', ['$scope', 'demo', function($scope, demo) {
    $scope.myPointtot = demo.pointtot;
}]);
myApp.controller('Ctrl2', ['$scope', 'demo', function($scope, demo) {
    $scope.yourPointtot = demo.pointtot;
}]);

HTML 代码：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="http://code.angularjs.org/1.2.1/angular.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Example of sharing data between controllers</h1>
        <div ng-controller="Ctrl1">
            <p>Write something in Controller 1 <input ng-model="myPointtot.hello" type="text" /></p>
        </div>
        <div ng-controller="Ctrl2">
            <h4>Everything you write in controller 1, it will be copied to controller 2 and vice versa</h4>
            <p>Write something in Controller 2 <input ng-model="yourPointtot.hello" type="text" /></p>
        </div>
    </body>
</html>