AngularJS：通过服务传递$scope变量

Question

我有两个控制器，在其中一个控制器中声明了一个$scope变量，我希望在第二个控制器中可以看到它。 第一个控制器

app.controller('Ctrl1', function ($scope) {
    $scope.variable1 = "One";
});

第二控制器。

app.controller('Ctrl2', function ($scope, share) {
   console.log("shared variable " + share.getVariable());
});

我研究了最佳的Angular方法，发现使用服务是最好的。因此，我为Ctrl1添加了一个服务。 服务

.service('share', function ($scope) {
    return {
        getVariable: function () {
            return $scope.variable1;
        }
    };
});

这段代码返回了以下错误：

Unknown provider: $scopeProvider <- $scope <- share

我的问题是：在控制器之间共享$scope变量是否可能？这不是最好的Angular解决方案，还是我漏掉了什么？

抱歉我的问题很基础，因为我是Angular初学者。

谢谢您提前的回答。

祝好。

- Giordano

Answer 1

是的，通过服务和工厂可以共享控制器之间的作用域变量。但是，$scope变量本身只局限于控制器，服务无法知道特定的变量。我更喜欢使用工厂，它非常简单顺畅。如果您在单独的文件中使用服务或工厂，则需要在index.html中包含该文件。

 app.controller('Ctrl1', function ($scope,myService,$state) {
        $scope.variable1 = "One";
        myService.set($scope.variable1);
        $state.go('app.thepagewhereyouwanttoshare');//go to the page where you want to share that variable.
    });

 app.controller('Ctrl2', function ($scope, myService) {
   console.log("shared variable " + myService.get());
});
    .factory('myService', function() {
      function set(data) {
        products = data;
      }
      function get() {
        return products;
      }

      return {
        set: set,
        get: get
      }

    })

- Sunil Lama

Answer 2

在服务工厂函数中，您不能注入 $scope 依赖项。

基本上，可共享的服务应该在某个对象中维护可共享的数据。

服务

.service('share', function () {
    var self = this;
    //private shared variable
    var sharedVariables = { };
    self.getSharedVariables = getSharedVariables;
    self.setVariable = setVariable;

    //function declarations
    function getSharedVariables() {
        return sharedVariables;
    }
    function setVariable() {
        sharedVariables[paramName] = value;
    }
});

控制器

app.controller('Ctrl1', function ($scope, share) {
    $scope.variable1 = "One";
    share.setVariable('variable1', $scope.variable1); //setting value in service variable
});

app.controller('Ctrl2', function ($scope, share) {
    console.log("shared variable " + share.getSharedVariables());
});

- Pankaj Parkar

Answer 3

更新：使用 $rootScope 被认为是不良实践。

你需要的是 $rootScope。而 $scope 只适用于一个控制器。以下是一个示例：

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.test = new Date();
})
.controller('myCtrl', function($scope, $rootScope) {
  $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
})
.controller('myCtrl2', function($scope, $rootScope) {
    $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.changeRs = function() {
        $rootScope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
});

- Jonas

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Beyers

是的，没错。但我认为这就是他所要求的。在某些情况下，这还是有用的。 - Jonas

我认为OP这个问题特别是关于如何使用 service 在控制器之间共享数据的。 - Beyers

Answer 4

你在使用服务方面做得很好，但是不应该尝试在服务代码的依赖注入中使用 $scope。服务旨在为您提供数据，因此如果您想在两个控制器之间共享一些数据，应该在您的服务中为此数据留出位置。

.service('share', function ($scope) {
    this.variable1 = '';
    return {
        getVariable: function () {
            return this.variable1;
        }
        setVariable(variable)
        {
            this.variable1 = variable;
        }
    };
});

app.controller('Ctrl1', function (share) {
    $scope.variable1 = share.getVariable();
});

这是关于此解决方案的更广泛描述： https://dev59.com/OWEh5IYBdhLWcg3w32xG#21920241

- suvroc

Answer 5

最好的方法是使用服务。服务只能访问$rootScope，它们没有自己的$scope。

然而，您不应该使用作用域来完成此任务。只需创建一个带有一些共享变量的服务，放在任何作用域之外即可。

.service('share', function ($scope) {

    var variable = 42;

    return {
        getVariable: function () {
            return variable;
        }
    };
});

app.controller('Ctrl', function ($scope, share) {
    console.log("shared variable " + share.getVariable());

    // Watch for changes in the service property
    $scope.$watch(function() { return share.getVariable(); }, function(oldValue, newValue) {
        // whatever
    });
});

- martin

Answer 6

首先，你的服务应该是这样的：

app.service('share', function () {
    // this is a private variable
    var variable1;
    return {
        // this function get/sets the value of the private variable variable1
        variable1: function (newValue) {
            if(newValue) variable1 = newValue;
            return variable1;
        }
    };
});

要设置共享变量的值，将值传递给我们在服务中创建的函数即可。

app.controller('Ctrl1', function ($scope, share) {
    $scope.variable1 = "One";
    // share the value of $scope.variable1
    share.variable1($scope.variable1);
});

要获取共享变量的值，也可以在服务中使用该函数而不传递值。

app.controller('Ctrl2', function ($scope, share) {
    console.log("shared variable " + share.variable1());
});

- ThisIsMarkSantiago