访问服务中的多个变量/ obj / func等

时间:2014-08-07 09:37:19

标签: javascript angularjs

我对angularjs非常缺乏经验。我正在尝试实现一种服务来跨控制器访问数据。我使用了this示例。

以下是我的js。我还没有发布我的HTML,因为我只是想让逻辑首先在js中运行。

angular.module('App')
    .factory('TestService', function() {
        return {testVar : '22222'}
    })

    .controller('MainCtrl', function (TestService) {
        console.log(TestService.testVar);
    }
    .controller('SecCtrl', function (TestService) {
        console.log(TestService.testVar);
    }

这很好用。我安装日志' 22222'每次我访问两个控制器。我可以更新var,它可以在控制器之间更新。如果我用

替换return {testVar : '22222'}
return {
   testVar : { x : '22222' }
}

然后我将对象x : '2222'记录到控制台。这似乎也很好。

问题是我无法理解控制台日志中TestService.testVar用法。乍一看,我以为它是从服务TestService记录var testVar。然而,通过查看示例,显然在这种情况下testVar实际上是一个键,返回的是键值。

这是从服务中返回内容的唯一方法,作为键值吗?

我希望使用该服务来访问服务中的多个值/对象等,但是在示例中使用return只会明显返回一个变量;除非我使用if语句,但这似乎有点过分,并且我真的错过了使用控制器的东西...

喜欢的东西;

angular.module('App')
    .factory('TestService', function() {
        (..code to choose what to return but the proper way...)
        return {testVar : '22222'}
        return {testVar2 : '333333'}
    })

    .controller('MainCtrl', function (TestService) {
        console.log(TestService.testVar);
        console.log(TestService.testVar2);
    }
    .controller('SecCtrl', function (TestService) {
        console.log(TestService.testVar);
        console.log(TestService.testVar2);
    }

我查看了this个问题,但我觉得它比我要问的要复杂得多。

2 个答案:

答案 0 :(得分:1)

第一次迭代

我们可以使用服务/工厂来存储信息并在控制器中进行检索。

angular.module('app', []).service('testService', function() {
    var testService = {};
    testService.x = 'x';
    testService.y = 'y';
    return testService;
}).controller('firstCtrl', function($scope, testService) {
    $scope.x = testService.x;
    $scope.y = testService.y;
}).controller('secondCtrl', function($scope, testService) {
    $scope.x = testService.x;
    $scope.y = testService.y;
});

jsfiddle:http://jsfiddle.net/krzysztof_safjanowski/aomL09fd/

第二次迭代

我们可以使用服务/工厂在控制器之间共享信息。

angular.module('app', []).service('testService', function() {
    var testService = {
        someObject: {
            x: 'x',
            y: 'y',
            z: ''
        }
    };
    return testService;
}).controller('firstCtrl', function($scope, testService) {
    $scope.someObject = testService.someObject;
}).controller('secondCtrl', function($scope, testService) {
    $scope.someObject = testService.someObject;
});

请注意我正在撤回对象someObject并且由Angular diggest进行休息。

jsfiddle:http://jsfiddle.net/krzysztof_safjanowski/aomL09fd/1/

答案 1 :(得分:0)

您可以尝试以下操作:

angular.module('App')
    .factory('TestService', function() {
        // Code to choose what to return but the proper way
        return {testVar2 : '333333', testVar : '22222'}
    })