如何在某些功能后正确重置 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;

我使用的angular版本是“3.6.6”

Answer 1

首先，当您在代码中放入 return 时，之后再包含其他代码是没有用的，因为它永远不会运行。您需要 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不让工厂外的用户看到，只允许它设置returned flag 通过辅助函数，即 infoFactory.setReturned( true ); 或 infoFactory.setReturned( false );，在 setReturned 函数中，您可以实现复杂的逻辑来验证发送到函数的值。请注意，infoFactory.setReturned( 'invalid value!!!' ); 会将 returned 标志设置为 false，因为我正在使用 strict === operator - val === true.

验证该值

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

作为旁注 - 不要使用 setTimeout(function(){ ... }); 使用 $timeout and $interval 然后你就不需要 $scope.$apply(); + $scope.$digest(); 来手动运行一个摘要循环，因为它由 Angularjs 为您处理

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

How to properly reset angularjs v1 factory after certain function

javascript

angularjs

arrays

angularjs-scope

angularjs-factory