用於存儲變量的Angular Service不起作用

Question

我有一個名為service的角度模塊。

基本上，我需要從另一個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>

觸發對我很好。

現在，如果您需要等待服務調用以返回數據，然后再執行某些操作，那么可以使用其他人建議的Promise。 這是一個諾言的例子：

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 個解決方案

解決方案1
0 2016-06-07 15:07:34

解決方案2
0 2016-06-07 15:15:16

解決方案3
0 已采納 2016-06-07 16:47:23

用於存儲變量的Angular Service不起作用

問題描述

3 個解決方案

解決方案1 0 2016-06-07 15:07:34

解決方案2 0 2016-06-07 15:15:16

解決方案3 0 已采納 2016-06-07 16:47:23

解決方案1
0 2016-06-07 15:07:34

解決方案2
0 2016-06-07 15:15:16

解決方案3
0 已采納 2016-06-07 16:47:23