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初学者。

提前致谢

此致

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
      }

    })

Answer 2

您不能在服务工厂函数中注入vm.username依赖项。

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

<强>服务

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

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

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://stackoverflow.com/a/21920241/4772988

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

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

AngularJs：使用service传递$ scope变量

6 个答案: