Question

好的，我有一个app.config.js文件，为用户设置状态提供程序配置，点击不同的链接，根据状态获取不同的数据（这里不太重要）。

这是我的表工厂，它代表屏幕上的表格数据/操作。

table.factory.js

export default function($filter){

 function Column(title, alias){
    this.title = title;
    this.alias = alias || null;
 }

 let Table = {
      expandAll: false,
      sortReverse: false,
      sortType: null,
      columns: [],
      tableData: null,
      emptyMessage: "No Data.",
      sort: function(column, index){},
      toggleRow: function(index){},
      toggleAll: function(){},
    }

    return {
       table: Table,
       column: Column
    };
}

如您所见，此表工厂返回一个具有2个属性的文字对象：table和column。

以下是另外两个使用table.factory.js的工厂。

load_balancing_advanced_table.factory.js：

export default function($http, $stateParams, $filter, tableFactory){

let Table = tableFactory.table;
let Column = tableFactory.column;

Table.sortType = "site_name";
Table.emptyMessage = "No Load Balancing - Advanced Data."
Table.columns.push(
    new Column("Site Name", "site_name"), 
    new Column("VLAN", "vlan"), 
    new Column("HTTP Caching", "http_caching"), 
    new Column("HTTP to HTTPS Redirect", "redirect"),
    new Column("Fallback URL(s)", "fallback_url")
);

return Table;

}

virtual_machines_table.factory.js：

export default function($http, $stateParams, $filter, tableFactory, natTableFactory){


let Table = tableFactory.table;
let Column = tableFactory.column;

Table.totalStorageAllocation = 0.0;
Table.emptyMessage = "No Virtual Machines Data."
Table.sort = null;
Table.sortReverse = null;
Table.columns.push(
    new Column("Host"), 
    new Column("Details"), 
    new Column("Network")
);

return Table;

}

我有两个工厂使用或注入table.factory.js的原因是因为我将公共表属性和方法放在一个文件中（表工厂的行为与父类一样）并保持代码干燥，以便“子”工厂不需要添加相同的代码。

我确实理解工厂是单例的，我认为在每次状态更改时（当用户点击不同的链接时），table.factory.js将返回到初始状态，然后填充正确的数据，具体取决于哪个正在使用控制器。但是，看起来每次在负载平衡页面和虚拟机页面之间切换（load_balancing_advanced.controller.js和virtual_machines.controller.js）时，属于负载平衡表的列和数据都会添加到虚拟机中表，反之亦然。理想的情况是每次内容更改，相应的控制器将注入将使用“父”表工厂的“子”工厂。

virtual_machines.controller.js：

export default function($scope, $stateParams, $filter, virtualMachinesTableFactory, formFactory){

let self = this;
self.virtualMachine = virtualMachinesTableFactory;

}

load_balancing_advanced.controller.js：

export default function($scope, $stateParams, $filter, loadBalancingAdvancedTableFactory, formFactory){

let self = this;
self.loadBalancingAdvanced = loadBalancingAdvancedTableFactory;

}

如您所见，控制器很简单，我正在做的就是将两个工厂注入控制器并向视图显示相应的数据。

我猜我在问什么，有没有办法重置table.factory.js数据？或者有更好的方法吗？

我做了一个快速测试，并且在页面重新加载时，表工厂只被调用一次，而适当的“子”工厂被调用每个内容/状态更改。

下面：

tableFactory->LoadBalancingAdvancedFactory->LoadBalancingAdvancedController
tableFactory->VirtualMachinesFactory->VirtualMachinesController

Answer 1

事实证明，表工厂很好地返回了一个对象文字，我谎称数据不正确。唯一的问题是Table对象的column属性。在内容之间切换时，列会继续推送到Table.columns属性。我只需要清空阵列。

// Load Balancing Advanced Table Factory
// The fix Table.columns = [];
Table.columns.push(
   new Column("Site Name", "site_name"), 
   new Column("VLAN", "vlan"), 
   new Column("HTTP Caching", "http_caching"), 
   new Column("HTTP to HTTPS Redirect", "redirect"),
   new Column("Fallback URL(s)", "fallback_url")
);

// Virtual Machines Table Factory
// The fix Table.columns = [];
Table.columns.push(
   new Column("Host"), 
   new Column("Details"), 
   new Column("Network")
);

但是，我没有返回表工厂内的文字对象，而是继续返回函数构造函数：

function Table(columns = [], emptyMessage = "No Data."){
    this.expandAll = false;
    this.sortReverse = false;
    this.sortType = null;
    this.columns = columns;
    this.tableData = null;
    this.emptyMessage = emptyMessage;
}

Table.prototype = {
    setTableData: function(tableData){},
    setSortReverse: function(sortReverse){},
    setSortType: function(sortType){},
    sort: function(){},
    toggleRow: function(index){},
    toggleAll: function(){}
}

return Table;

我返回函数构造函数的原因是因为如果你查看virtual_machines_table.factory.js，我就有这行代码：

/*
   This is a custom property and other properties and methods (omitted) 
   that belongs only to the virtual machines table, which does not exists 
   in the table factory.
   Using a table factory that returns an object literal (same object),
   the load balancing advanced table or any future tables will 
   have those custom methods and properties that belongs in the 
   virtual machines table; this is not what I wanted.
   Returning a function constructor instead will ensure on each content
   change, each table gets its own different table object. 
*/
Table.totalStorageAllocation = 0.0;

重置每个州变更的角度工厂数据

1 个答案: