这是我的表工厂,它表示屏幕上的表数据/操作.
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,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,virtualMachinesTableFactory,formFactory){ let self = this; self.virtualMachine = virtualMachinesTableFactory; }
load_balancing_advanced.controller.js:
export default function($scope,loadBalancingAdvancedTableFactory,formFactory){ let self = this; self.loadBalancingAdvanced = loadBalancingAdvancedTableFactory; }
如您所见,控制器很简单,我所做的就是将两个工厂注入控制器并向视图显示适当的数据.
我猜我在问什么,有没有办法重置table.factory.js数据?或者,还有更好的方法?
我做了一个快速测试,并且在页面重新加载时,表工厂只被调用一次,而适当的“子”工厂被调用每个内容/状态更改.
这里:
tableFactory->LoadBalancingAdvancedFactory->LoadBalancingAdvancedController tableFactory->VirtualMachinesFactory->VirtualMachinesController
解决方法
// Load Balancing Advanced Table Factory // The fix Table.columns = []; Table.columns.push( new Column("Site Name","fallback_url") ); // Virtual Machines Table Factory // The fix Table.columns = []; Table.columns.push( new Column("Host"),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(){},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;