AngularJS：如何在控制器之间传递变量

AngularJS

AngularJS是一种流行的JavaScript框架，用于构建Web应用程序。在开发过程中，经常需要在控制器之间传递变量。本文将介绍如何使用AngularJS来实现控制器之间的变量传递，并提供一个案例代码来说明这个过程。

使用$rootScope进行变量传递

在AngularJS中，可以使用$rootScope对象来实现控制器之间的变量传递。$rootScope是所有作用域的根作用域，可以在整个应用程序中共享数据。

为了在控制器之间传递变量，首先需要在应用程序的根作用域中定义一个变量。可以在应用程序的主模块中使用.run()函数来定义这个变量。例如：

Javascript
angular.module('myApp', [])
  .run(function($rootScope) {
    $rootScope.sharedVariable = 'Hello World';
  });

在上面的代码中，我们在应用程序的根作用域中定义了一个名为sharedVariable的变量，并将其值设置为'Hello World'。

接下来，我们可以在不同的控制器中使用这个变量。只需要将$rootScope对象注入到控制器中，然后就可以访问和修改sharedVariable变量了。例如：

Javascript
angular.module('myApp')
  .controller('Controller1', function($scope, $rootScope) {
    $scope.variable1 = $rootScope.sharedVariable;
  })
  .controller('Controller2', function($scope, $rootScope) {
    $scope.variable2 = $rootScope.sharedVariable;
  });

在上面的代码中，我们分别在Controller1和Controller2中注入了$rootScope对象，并将sharedVariable变量赋值给了各自的$scope对象中的变量variable1和variable2。

这样，变量sharedVariable就被成功传递给了不同的控制器，并且可以在视图中使用。

案例代码

下面是一个简单的示例，演示了如何在控制器之间传递变量。

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS Variable Sharing</title>
  <script src="JS.cloudflare.com/Ajax/libs/angular.JS/1.8.2/angular.min.JS">https://cdnJS.cloudflare.com/Ajax/libs/angular.JS/1.8.2/angular.min.JS</a>"></script>
  <script>
    angular.module('myApp', [])
      .run(function($rootScope) {
        $rootScope.sharedVariable = 'Hello World';
      })
      .controller('Controller1', function($scope, $rootScope) {
        $scope.variable1 = $rootScope.sharedVariable;
      })
      .controller('Controller2', function($scope, $rootScope) {
        $scope.variable2 = $rootScope.sharedVariable;
      });
  </script>
</head>
<body>
  <div ng-controller="Controller1">
    <h2>Controller 1</h2>
    
Shared Variable: {{variable1}}
  </div>
  <div ng-controller="Controller2">
    <h2>Controller 2</h2>
    
<img src="https://img.izhida.com/topic/d52387880e1ea22817a72d3759213819.jpg" alt="Java"><br>Java
Shared Variable: {{variable2}}
  </div>
</body>
</html>

在上面的代码中，我们创建了一个名为myApp的AngularJS应用程序，并在应用程序的根作用域中定义了一个名为sharedVariable的变量。然后，我们创建了两个控制器Controller1和Controller2，并将sharedVariable变量分别赋值给了它们的$scope对象中的变量variable1和variable2。最后，我们在视图中显示了这两个变量的值。

当我们在浏览器中打开这个示例，并查看控制台输出，就可以看到sharedVariable变量成功传递给了两个控制器，并在视图中正确地显示出来。

通过使用$rootScope对象，我们可以在AngularJS中实现控制器之间的变量传递。在应用程序的根作用域中定义一个变量，并在不同的控制器中使用$rootScope对象来访问和修改这个变量。这样，我们就可以在控制器之间共享数据，实现更灵活和可维护的应用程序开发。

参考资料

- AngularJS Documentation: https://docs.AngularJS.org/

- AngularJS $rootScope Documentation: https://docs.AngularJS.org/api/ng/service/$rootScope