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

Question

我想在不使用 $rootScope 的情况下在 angularjs 中跨多个 Controller 共享数据。我正在学习使用服务。以下代码有什么问题？

这是我的 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

您不能将服务变量绑定(bind)到 Controller 变量，您的代码正在更改 shareVar 但您看不到它，您可以像这样更新 View :

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