代码之家 › 专栏 › 技术社区 › Giordano Prashanth Babu

AngularJs:将$scope变量与服务一起传递

angularjs-service angularjs-scope angularjs javascript

Giordano Prashanth Babu · 技术社区 · 9 年前

我有两个控制器,在其中一个控制器中,我声明了一个$scope变量,希望在第二个控制器中可见。

第一个控制器

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

第二个控制器

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

我研究了最好的角度方法,我发现这就是服务的使用。所以我为添加了一项服务 Ctrl1

服务

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

此代码返回此错误:

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

所以我的问题是:控制器之间是否可能存在共享$scope变量?不是最好的角度解决方案还是我错过了什么?

对不起,我的小问题,但我是一个角度初学者。

提前谢谢

当做

6 回复 | 直到 9 年前

Sunil Lama 9 年前

是的,可以通过服务和工厂在控制器之间共享范围变量。但是,$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
      }

    })

Pankaj Parkar 7 年前

你不能注射 $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());
});

Community CDub 7 年前

您对服务的尝试非常好,但不应该尝试在服务代码的依赖注入中使用$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

martin 9 年前

最好的方法是真正使用服务。服务只能访问 $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
    });
});

ThisIsMarkSantiago 9 年前

首先,您的服务应该是这样的:

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

Jonas 9 年前

更新: 使用$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;
    };
});