角循环依赖解决方法

时间:2016-02-04 14:19:33

标签: angularjs

小提琴:https://jsfiddle.net/ahmadabdul3/L3eeeh6n/

我正在构建应用。这个应用程序从一些我可以添加,删除的静态数据开始。我遇到的问题(循环依赖)来自这个初始静态数据。这是场景:

我有2项服务(水果,篮子)。每个水果只能属于一个篮子,但每个篮子可以容纳许多水果。这两项服务(如下)相互依赖:

function fruitService() {}
function basketService() {}

他们相互依赖的原因是因为我拥有的初始静态数据:

function fruitService(basketService) {
  var data = [
   {
     id: 0,
     name: 'apple',
     basket: function() { return basketService.getById(this.refs.basket); },
     refs: {
       basket: 0
     }
   }
  ];
}

如你所见,我有一个函数basket,它返回一个篮子项,这样我就可以从水果对象中动态检索篮子对象。

篮子服务类似:

function basketService(fruitService) {
  var data = [
   {
     id: 0,
     name: 'basket1',
     fruits: function() { return fruitService.getByIdList(this.refs.fruits); },
     refs: {
       fruits: [0, ...]
     }
   }
  ];
}

与fruitService相同,我有一个fruits函数,当我要求它时可以给我水果对象。我尝试了不同的方法组合来尝试分解实际的静态数据和服务以克服这种循环依赖,但它没有发生。

如何在没有这种循环依赖性的情况下构建它

3 个答案:

答案 0 :(得分:1)

让其中一个服务使用$ injector并在运行时查找服务

var injectedService = $injector.get('servicenamehere');

您需要在服务参数中添加$ injector才能使其正常工作(以防万一有问题)

答案 1 :(得分:1)

您不需要2项服务。我认为一个就足够了。

function basketService() {
  var data = [
   {
     id: 0,
     name: 'apple',
     basketName: 'basket1'
   },
  ];

  var service = {
    getFruitById: getFruitById,
    getBasketById: getBasketById
  };

  function getFruitById(fruitId){
    // return one fruit here
  }

  function getBasketById(basketId){
    // return your basket with a list of fruits
  }
}

答案 2 :(得分:0)

另一种选择是使用常量来存储数据。

angular.module('yourApp').Constant("fruitAndBasketConstant", {
    baskets : [{
        id : 0,
        fruits : [
            {
               // some info
            },
            {
               // some info
            }
        ]
     }]
});

创建一个将查询常量的服务。

angular.module("yourApp").factory("FruitService"["fruitAndBasketConstant", function(fruitAndBasketConstant){

    var service = {
        getFruitById: getFruitById
    };

    return service;


    function getFruitById(fruitId){
        // loop through fruitAndBasketConstant.baskets

        // and return the fruit you want
    }

}]);

为你的basketService做同样的事。