如何在某些功能后正确重置 angularjs v1 工厂

Question

我做了一个工厂，将我范围内的信息保存在一系列 6 页中。现在，当用户完成第 6 页并推送我希望工厂再次重置为空数组的对象时。

我已经尝试了很多超时和应用元素，还尝试了很多组合将数组设置为空（null、""、{}）。但是当我再次加载页面时它仍然会加载旧信息（第 1/6 页）。

提交功能（也需要重置范围）是

$scope.send = function(){
    if(ArrayInfo.Checkmark == true){
        firebase.database().ref('lorem/' + ArrayInfo.Ordernumber).set({
          info: ArrayInfo,
          Dates: Dates,
          gasmeter: gasmeter,
          gasmeter1: gasmeter1  
        }).then(function(){
          firebase.database().ref('lorem2/' + ArrayInfo.currentYear).set({
            last_number: ArrayInfo.Ordervalue
          });
        }).then(function(){
          //ArrayInfo = {};
          setTimeout(function(){
            ArrayInfo = "";
            $scope.info = "";
            $scope.$apply();
            $scope.$digest();
          }, 50);

        });
      //close newrental
        setTimeout(function(){
          if (window.confirm('Information saved! You are ready to leave this screen? no changes possible after this point'))
          { 
            //disable back button in home 
            $ionicHistory.nextViewOptions({
              disableBack: true
            });
            //go home
            $state.go("app.auth");
          }
          //error close newrental
          else
          {
             alert("Take your time");
          }
        }, 50);

    }
    //error send array
    else {
      alert("Please accept the terms and conditions.");
    }
  }

我的工厂是这样的

mainapp.factory("infoFactory", function(){
  ArrayInfo = {};
  placeholders = {
    "licenseone" : "img/placeholder.png",
    "licensetwo" : "img/placeholder.png",
    "licensethree" : "img/placeholder.png",
    "licensefour" : "img/placeholder.png",
    "imageone" : "img/front.png",
    "imagetwo" : "img/sideleft.png",
    "imagethree" : "img/back.png",
    "imagefour" : "img/sideright.png",
    "imagefive" : "img/roof.png",
    "imagesix" : "img/placeholder.png",
    "imageseven" : "img/placeholder.png",
    "imageeight" : "img/placeholder.png"
  };
  gasmeter = {
    "url" : "img/gas/gas1.png",
    "gasvalue" : "1"
  }
  gasmeter1 = {
    "url" : "img/gas/gas1.png",
    "gasvalue" : "1"
  }
  ArrayInfo.returned = false;
  RawDate = {};
  Dates = {};

  console.log(ArrayInfo);

  return ArrayInfo;
  return gasmeter;
  return gasmeter1;
  return placeholders;
  return RawDate;
  return Dates;
})

然后我像这样在我的控制器中加载信息

$scope.info = infoFactory;
$scope.Dates = Dates;
$scope.RawDate = RawDate;
$scope.gasmeter = gasmeter;
$scope.gasmeter1 = gasmeter1;

---

我使用的角度版本是“3.6.6”

Answer 1

首先，当您在代码中添加return 时，在此之后包含其他代码是没有用的，因为它永远不会运行。您需要返回 Object。

mainapp.factory("infoFactory", function(){
  ArrayInfo = {};
  placeholders = {
    "licenseone" : "img/placeholder.png",
     // Rest of the images
  };
  gasmeter = {
    "url" : "img/gas/gas1.png",
    "gasvalue" : "1"
  }
  gasmeter1 = {
    "url" : "img/gas/gas1.png",
    "gasvalue" : "1"
  }
  ArrayInfo.returned = false;
  RawDate = {};
  Dates = {};

  console.log(ArrayInfo);

  return { 
    ArrayInfo: ArrayInfo, 
    gasmeter: gasmeter, 
    gasmeter1: gasmeter1, 
    placeholders: placeholders, 
    RawDate: RawDate, 
    Dates: Dates 
  };
})

现在您可以将infoFactory 注入控制器并像这样使用它：infoFactory.RawDate。

现在，如果你想恢复出厂，你可以添加一个重置所有数据的功能：

mainapp.factory("infoFactory", function(){
  // Save a reference to the current pointer of the factory, so you won't loose it inside other scopes  
  var self = this;

  self.params = {
       ArrayInfo: {},
       placeholders: {},
       gasmeter: {},
       gasmeter1: {},
       ArrayInfo: false,
       RawDate: {},
       Dates: {}
  };

  self.reset = function() {
     self.params.ArrayInfo = {};

     self.params.placeholders.licenseone = "img/placeholder.png";

     self.params.gasmeter.url = "img/gas/gas1.png";
     self.params.gasmeter.gasvalue = "1";

     self.params.gasmeter1.url = "img/gas/gas1.png";
     self.params.gasmeter1.gasvalue = "1";

     self.params.ArrayInfo.returned = false;

     self.params.RawDate = {};

     self.params.Dates = {};
  }
  self.reset(); // Call this function by default in order to initially set the factory properties 

  return { 
    reset: self.reset, // You can export the reset function and use it outside the factory too
    ArrayInfo: self.params.ArrayInfo, 
    gasmeter: self.params.gasmeter, 
    gasmeter1: self.params.gasmeter1, 
    placeholders: self.params.placeholders, 
    RawDate: self.params.RawDate, 
    Dates: self.params.Dates 
  };
})

现在，当您有重置功能时，您可以像这样在工厂外使用它：infoFactory.reset()，只要您想将数据重置为初始状态。我在工厂内部创建了一个基础对象 (this.params = { .. }) 并在其中保存了所有详细信息属性，在 reset 函数内我更新了这些属性没有破坏原始引用 (Working example) .

以上只是一个示例，但您可以（或者也许应该）封装工厂的params，并且只允许用户通过辅助函数控制和更改值。如何做到这一点的例子：

mainapp.factory("infoFactory", function(){
  var self = this;

  self.params = {
     returned: false,
  };

  return {
     setReturned: function(val) { self.params.returned = val === true; },
     returned: function() { return self.params.returned; }
  }
});

上面的例子将隐藏工厂外用户的实际params.returned，只允许它通过辅助函数设置返回标志，即@987654338 @ 或 infoFactory.setReturned( false );，在 setReturned 函数中，您可以实现复杂的逻辑来验证发送给函数的值。请注意，infoFactory.setReturned( 'invalid value!!!' ); 会将returned 标志设置为false，因为我正在使用strict === operator - val === true 验证该值。

然后，要从工厂获取值，请调用 infoFactory.returned() 函数 - 通过使用函数，您会阻止外部访问工厂属性。

---

作为旁注 - 不要使用 setTimeout(function(){ ... }); 使用 $timeout 和 $interval 然后您将不需要 $scope.$apply(); + $scope.$digest(); 来手动运行摘要循环，因为它正在被处理Angularjs 为您提供的原生