Question

我有一个叫做服务的角度模块。

基本上，我需要从另一个Controller调用函数并获得一个它将返回的数组。

所以我为此创建了一个服务。我在ControllerTwo内调用ControllerOne的函数，此函数将数据放入服务的变量serviceTwolist。之后我在ControllerTwo中访问此变量。

但我的变量allData应该是函数getListTwo()的调用返回，是“未定义的”。

有人可以解释什么是错的吗？

var service = angular.module('service', ['datatables']);

service.service('serviceTwo', function () {
    this.serviceTwolist = [];

    this.returnList = function () {
        return serviceTwolist;
    }
});

service.controller('ControllerOne', ['$http', '$scope', '$stateParams', '$rootScope', 
'serviceTwo', function ($http, $scope, $stateParams, serviceTwo) {

    $scope.crossData = function () {
        $scope.$emit('getListTwo');
        var allData = serviceTwo.serviceTwolist;
        .....
    }};   

service.controller('ControllerTwo', ['$http', '$scope', '$stateParams', 'serviceTwo', 
function ($http, $scope, $stateParams, serviceTwo) {
 $scope.$on('getListTwo', function () {
    $http.get(*******).then(
        function success(response) {
            serviceTwo.serviceTwolist = response.data;
        },
        function error(data) {
            console.log(data);
            window.alert(data.data.message);
        }
    );
});

承诺尝试＃1 失败

$scope.crossData = function () {

 var promise = new Promise(function (resolve, reject) {
        $scope.$emit('getListTwo');
    });
    var allData = [];

    promise.then(function (result) {
        allData = serviceTwo.serviceTwolist;
    }, function (err) {
        console.log(err);
    });
 ....

承诺尝试＃2 （通过Andrei Dragotoniu）失败

 $scope.crossData = function () {

    this.promiseMethod = function () {

        var deferred = $scope.$emit('getListTwo');
            data = serviceTwo.serviceTwolist;

        deferred.resolve(data);
        return deferred.promise();
    };

    promiseMethod().then(function (someData) {
        allData = servicetwo.serviceTwolist;
    });
 ....

我做错了什么，不是吗？

Answer 1

那么，看看你在那里得到的东西，我认为ControllerTwo应该做的是发射器，以便ControllerOne知道服务已经被填满了？此外，ControllerOne应该调用serviceTwo.returnList（），或者只是在不必要时删除该方法。

Answer 2

我运行了你的代码，只是简化了一下。对我来说很好。这是我做的：

js：

(function () {
    var service = angular.module('service', []);

    service.service('serviceTwo', function () {
        this.serviceTwolist = [];

        this.returnList = function () {
            return serviceTwolist;
        }
    });

    service.controller('ControllerOne', ['$scope', '$rootScope', 
    'serviceTwo', function ($scope, serviceTwo) {

        $scope.crossData = function () {
            $scope.$emit('getListTwo');
            var allData = serviceTwo.serviceTwolist;            
        }

        $scope.$on('getListTwo', function () {
            serviceTwo.serviceTwolist = { data: 1 };
        });
    }]);

})();

您在html中所要做的就是触发crossData方法。

我整理了一个简单的html，以便显示工作：

<body ng-app="service" ng-controller="ControllerOne">    
    <button ng-click="crossData();">Go</button>   
</body>
</html>

对我来说很好。

现在，如果您需要等待服务调用以返回数据然后执行某些操作，那么请使用其他人建议的承诺。这是一个承诺的例子：

this.promiseMethod = function () {

        var deferred = $.Deferred(),
            data = some service call

        deferred.resolve(data);
        return deferred.promise();
    };

使用它然后执行类似的操作：

promiseMethod().then(function (someData) {
   do something here
});

Answer 3

http调用是异步的，在controllertwo收到事件getListTwo并触发http请求后，它不会等待http调用成功。您应该等待完成调用以更新allData。

用于存储变量的Angular Service不起作用

3 个答案: