如何在 angularjs 中将数据从工厂传递到我的控制器？

Question

我正在尝试将所有业务逻辑从我的控制器移至工厂，但我在传递字段数据时遇到了一些问题。

factory.js

app.factory("Quote", function ($resource) {
    // TODO: this shouldn't start with /en/
    var quoteStatus = [];
    var quoteLanguage = [];

    var Quote = $resource("/en/quote/api/quote/:id", {}, {
        retrieve: {
          method: 'GET',
          params: {},
          isArray: true
        },
        query: {
          method: 'GET',
          params: {},
          isArray: true,
          url: '/en/quote/api/quote/'           
        },
        fields: {
          method: 'GET',
          url: '/en/quote/api/quote/fields/ '
        },
        update: {
          method: 'PATCH',
        },
    });

    Quote.fields().$promise.then(function (fields) {
        var tempObj = [];
        for (key in fields.status) {
            // must create a temp object to set the key using a variable
            tempObj[key] = fields.status[key];
            quoteStatus.push({
                value: key,
                text: tempObj[key]
            });
        }

        for (key in fields.language) {
            // must create a temp object to set the key using a variable
            tempObj[key] = fields.language[key];
            quoteLanguage.push({
                value: key,
                text: tempObj[key]
            });
        }

        //$scope.addLanguage($scope.language);

        Quote.status = quoteStatus;
        Quote.language = quoteLanguage;
    });

    return Quote;


});

controller.js

$scope.quoteStatus = Quote.status;

但是这不起作用，因为 $scope.quoteStatus 是 undefined。我错过了什么？

提前致谢。

Answer 1

您不能期望异步操作以同步方式运行。

基本上当控制器在其工厂函数中注入 Quote 时，Quote 服务对象被创建，然后调用 Quote.fields()。当您在控制器中询问 Quote.status 时，将始终 return 未定义。您没有在任何地方保持承诺，因此控制器将知道数据是否准备就绪。

我认为你应该在那里引入 $q.when 标志来检查 Quote.fields() 操作是否完成，然后在那里获取所需的变量。

为了实现上述内容，您需要将 Quote.fields() 调用的承诺存储在服务中的某处。如下所示

var quoteFieldsPromise = Quote.fields().$promise.then(function (fields) {

   /// the code will be same here

};

然后添加新方法，该方法将保存 quoteFieldsPromise promise 对象和 return quoteStatus & quoteLanguage 的值。

var getQuoteDetails = function(){
   $q.when(quoteFieldsPromise).then(function(){
      return { quoteStatus: Quote.quoteStatus, quoteLanguage: Quote.quoteLanguage };
   })
}

但是您 return 编辑了整个 Quote 对象的方式，其中只有 $resource 个对象需要更改。我的意思是说我创建的 getQuoteDetails 方法不能 return 与 Quote 对象。所以我宁愿将服务重构到下面。

服务

app.factory("Quote", function($resource, $q) {
    // TODO: this shouldn't start with /en/
    var quoteStatus = [], //kept private if needed
        quoteFieldsPromise, 
        quoteLanguage = [];//kept private if needed

    var QuoteApi = $resource("/en/quote/api/quote/:id", {}, {
        //inner code is as is 
    });

    //preserve promise of .fields() call
    quoteFieldsPromise = Quote.fields().$promise.then(function(fields) {
        //inner code is as is 
        //below lines are only changed.

        Quote.status = quoteStatus;
        Quote.language = quoteLanguage;
    });

    var getQuoteDetails = function() {
        return $q.when(quoteFieldsPromise).then(function() {
            return {
                quoteStatus: quoteStatus,
                quoteLanguage: quoteLanguage
            };
        })
    };

    return {
        QuoteApi: QuoteApi,
        getQuoteDetails: getQuoteDetails
    };
});

控制器

Quote.getQuoteDetails().then(function(quoteDetails){
    $scope.quoteStatus = quoteDetails.quoteStatus;
    $scope.quoteStatus = quoteDetails.quoteLanguage;
});

如何在 angularjs 中将数据从工厂传递到我的控制器？

How can I pass an data from factory to my controller in angularjs?

javascript

angularjs

angularjs-service

angularjs-controller

angularjs-factory