2016-07-07 40 views
4

好吧,我有一個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.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 
+0

*「我明白工廠是單身人士」* - 我不認爲這種說法總是如此。這是NG團隊在其命名約定中沒有遵循期望的直接結果。 '.factory('singleton',function(){function Singlton(){...}; return new Singlton})vs'.factory('notASinglton',function(){return function Singleton(){... }})'。如果您返回構造函數並實例化注入的地方,則每次都會得到一個乾淨的平板。如果NG API被命名爲'.factoryFunc(...)',你會看到更少的混淆。 – jusopi

+0

對不起,你是完全正確的,因爲我想要返回一個構造函數,但是在用google搜索後,這不是一個好習慣?我真的很想做(在工廠內)函數Table(){} return Table;然後在控制器內部注入工廠並執行新的Table(); – FNMT8L9IN82

+1

我看到這兩個關於最終結果沒有區別。做什麼是務實和可擴展的,而不是純粹主義者說的。 https://gist.github.com/jusopi/fa68f1b517e3b24a4c6b31d79fcfbb6c – jusopi

回答

0

因此,原來的錶廠就好了返回一個對象文本,我謊稱不是正確的數據。唯一的問題是Table對象的列屬性。在內容之間切換時,列不斷推送到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;