如何使用 angularjs 中的服务在多个控制器之间共享数据？答案

【问题标题】：how to use services in angularjs to share data across multiple controllers?如何使用 angularjs 中的服务在多个控制器之间共享数据？
【发布时间】：2013-09-19 07:23:43
【问题描述】：

我想在不使用 $rootScope 的情况下在 angularjs 中的多个控制器之间共享数据。我正在学习使用相同的服务。下面的代码有什么问题？

这是我的 controllers.js：

function Ctrl1(shareData) {
  shareData.setValue("my_data");
}

function Ctrl2($scope, shareData) {
  $scope.value = shareData.getvalue();
}

这是我的 services.js：

angular.module('connectionsServices').
  factory('shareData', function() {
  var shareVar = 'undefined';
    return {
              getValue: function() {
          return shareVar;
          },

              setValue: function(value) {
          shareVar = value;
          }
       }
       });

但它不起作用。

【问题讨论】：

如果你有 Fiddle 或 Plunker 会很有帮助
你有一个错字。在 Ctrl2 中，shareData.getvalue(); 应该是 shareData.getValue();

标签： javascript angularjs scope controllers

【解决方案1】：

您无法将服务变量绑定到控制器变量，您的代码正在更改 shareVar 但您看不到它，您可以像这样更新视图：

HTML：

<div ng-app="testApp">
    <div ng-controller="Ctrl2">{{ value }}
        <br />
        <div ng-controller="Ctrl1">
            <button type="button" ng-click="change(); update();">Change me!</button>
        </div>
    </div>
</div>

JS：

angular.module('testApp', []).factory('shareData', function ($window) {
    var shareVar = 'undefined';
    return {
        getValue: function () {
            return shareVar;
        },

        setValue: function (value) {
            shareVar = value;
        }
    };
});

function Ctrl1($scope, $window, shareData) {
        $scope.change = function () {
            shareData.setValue("my_data");
        };
    }

    function Ctrl2($scope, shareData) {
        $scope.value = shareData.getValue();

        $scope.update = function () {
            $scope.value = shareData.getValue();
        };
    }

【讨论】：

【解决方案2】：

服务为我们提供了一种共享数据和功能的简便方法在我们的应用程序中。我们创建的服务是单例的，可以注入控制器和其他服务，使它们成为理想的编写可重用代码的地方。

点击链接https://thinkster.io/a-better-way-to-learn-angularjs/services

【讨论】：