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

Question

我想在不使用 $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;
          }
       }
       });

但它不起作用。

Answer 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();
        };
    }

Answer 2

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

按照它的链接https://thinkster.io/a-better-way-to-learn-angularjs/services