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

任务是使用AngularJS在两个或多个控制器之间共享数据变量。有很多程序可以实现这一目标。在这里，我们将讨论最受欢迎的。

方法：为了在AngularJS中的控制器之间共享数据，我们有两种主要情况：

• 在父级和子级之间共享数据：这里，数据共享可以简单地通过使用控制器继承来完成，因为子级控制器的作用域是从父级控制器的作用域继承而来的。
• 在控制器之间共享数据而无需关联：在这里，可以通过几种方式完成数据共享，其中一些方式是：

  通过使用rootScope变量：我们可以使用rootScope变量来保存共享数据，然后可以从任何控制器中引用它。在这里，在Angular应用程序启动时，我们使用一些值初始化了rootScope变量，然后从每个控制器中引用它，从而将两个控制器中的作用域变量绑定到rootScope变量。

  • 例子：

      
    
        
            Angular JS sharing data using rootScope
        
        
        
    
      
    
         
            GeeksforGeeks 
        
      
        
            
                First controller
                {{firstvalue}}
            
            
                Second controller
                {{secondvalue}}
            
        
      
        
            var mainApp = angular.module("mainApp", []);
      
            mainApp.run(function($rootScope) {
                $rootScope.value = 
                   'A Computer Science Portal for Geeks';
            });
            mainApp.controller('firstcontroller',
                function($scope, $rootScope) {
                    $scope.firstvalue = $rootScope.value;
                });
            mainApp.controller('secondcontroller',
                function($scope, $rootScope) {
                    $scope.secondvalue = $rootScope.value;
                });
        
    
      
                        

  • 输出：
    

  通过使用工厂或服务： $ rootscope方法不适合用于数据传输或共享数据，因为它具有可用于整个应用程序的全局范围。因此，我们使用另一种方法来创建工厂或服务来保存共享数据。 AngularJS工厂和服务是JS函数，它们执行包含方法和属性的特定任务，并且可以使用依赖项注入将其注入其他组件(例如，控制器)中。这样，我们可以在工厂中定义共享变量，将其注入两个控制器中，从而将两个控制器中的作用域变量绑定到该工厂数据。

  • 例子：

      
    
        
            Angular JS sharing data using factory
        
        
        
    
      
    
         
            GeeksforGeeks 
        
      
        
            
                
                 Input in first controller is : {{value.name}}
            
            
            
                Input in second controller is : {{value.name}}
            
        
      
        
            var mainApp = angular.module("mainApp", []);
      
            mainApp.factory('Fact', function() {
                return {
                    name: ''
                };
            });
      
            mainApp.controller('FirstController',
                            function($scope, Fact) {
                $scope.value = Fact;
            });
      
            mainApp.controller('SecondController',
                            function($scope, Fact) {
                $scope.value = Fact;
            });
        
    
      
                        

  • 输出：