1
我正在寫SPA,SPA的結構幾乎相同(DOM)的所有時間(除授權表格)。它的外觀看起來完全一樣,但它們之間幾乎沒有什麼不同。模型在不同的情況下是不同的,應用的行爲取決於目前使用的模型。例如,一個模型的樣子:需要在angularjs SPA的建議
<table class="matrix" ng-if="search_result_type=='find_company'">
<tr ng-class="{matrix_row: !row.show}" ng-style="multiStyle(row, this)" class="animation" ng-repeat="row in search_result | filter:cacheTemplate track by $index">
<td class="properties">{{row.name}}</td>
<td class="properties" ng-if="isArray(row.contact)" ng-click="row.close!='disable' && row.show!=true ? row.show=true : null" colspan="{{row.show ? 2 : 1}}">
<div ng-show="!row.show" ng-class="{multi_close : isMulti(row)}">{{row.contact[0].name}}</div>
<div ng-repeat="ctx in row.contact track by $index" class="matrix_row multi_cell" style="line-height: 3; width: 100%; position: relative;" ng-show="row.show" ng-click="row.close!='disable' ? alert('загрузка контакта '+ ctx.name) : null">
<div style="display: inline-block; width: 49%;">{{ctx.name}}</div>
<div style="display: inline-block; width: 49%;">{{ctx.phone}}</div>
<div class="block" ng-if="$index==row.contact.length-1" ng-mouseover="row.close='disable'" ng-mouseleave="row.close='enable'" ng-click="row.close!='enable'? row.show=false : null"></div>
</div>
</td>
<td class="properties" ng-if="!isArray(row.contact)">{{row.contact}}</td>
<td class="properties" ng-show="!row.show">{{row.company_phone}}</td>
<td class="properties">{{row.Legal_address}}</td>
</tr>
</table>
第二種模式:
<table class="matrix" ng-if="search_result_type=='find_calculation'">
<tr ng-class="{matrix_row: !row.show}" class="animation" ng-click="loadCalculation(row.id)" ng-style="multiStyle(row, this)" ng-repeat="row in search_result | filter:cacheTemplate track by $index">
<td class="properties">{{row.name}}</td>
<td class="properties">{{row.a_limit | currency:'RUB '}}</td>
<td class="properties">{{row.total_price | currency:'RUB '}}</td>
<td class="properties">{{row.amount}}</td>
<td class="properties">{{row.date}}</td>
</tr>
</table>
,最後一個:
<table class="matrix" ng-if="search_result_type=='load_calculation'" ng-repeat="park in parks track by $index" ng-init="parentIndex = $index">
<tbody>
<tr ng-repeat="process in processes | filter : { park: parentIndex } track by $index">
<td class="properties">{{process[1]}}</td>
<td class="properties">{{process[2]}}</td>
<td class="properties">{{process[3]}}</td>
<td class="properties">{{process[4]}}</td>
<td class="properties">{{process[5]}}</td>
<td class="properties">{{process[6]}}</td>
</tr>
</tbody>
</table>
我尋找不是答案,而是建議。我需要使用多少個控制器?每個模型一個?如果我使這個html結構完全相同,它會更好?
也許一個組件/指令? –
爲每個視圖使用不同的控制器。將常用功能放入服務中。我的想法。 – georgeawg
**主要是基於意見的** 許多優秀的問題根據專家的經驗產生了某種程度的意見,但對這個問題的回答往往幾乎完全基於意見,而不是事實,參考或具體專業知識。 – georgeawg