如何有效地重用部分？

Question

我開始遇到這個問題很多。這個場景是我有一個我想重用的部分。問題是，我將不得不覆蓋範圍內的以前的數據，以便新數據顯示在部分內容中。我想知道人們如何解決這個問題。

下面是一個例子：

我有標籤，所有使用$scope.pebbles並共享相同的部分。對於每個標籤，我希望填充不同的數據。所以很自然地，我只是提出新的數據請求並將其存儲回變量中以更改數據，例如：$scope.pebbles = getPebbles(color)。這個問題是我每次更改標籤時都必須提出新的請求。有沒有一個更好的方法，而不是有一個很大的局部？

overview.html：

<tab> 
    <tab-heading> 
     <i class="icon-bell"></i> All 
    </tab-heading> 
    <div class="tab-content"> 
     <div ng-include="'views/partials/_pebbles.html'"></div> 
    </div> 
</tab> 
<tab ng-repeat="color in colors"> 
    <tab-heading ng-click="tab(color)"> 
     {{color}} 
    </tab-heading> 
    <div class="tab-content"> 
     <div ng-include="'views/partials/_pebbles.html'"></div> 
    </div> 
</tab> 

_pebbles.html：

<table class="table table-striped table-bordered bootstrap-datatable datatable"> 
    <thead> 
     <tr> 
      <th>Pebble Name</th> 
      <th>Pebble Type</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="pebble in pebbles"> 
      <td>{{pebble.name}}</td> 
      <td>{{pebble.type}}</td> 
     </tr> 
    </tbody> 
</table> 

控制器：

$scope.colors = ['blue','red','orange','purple'] 
$scope.pebbles = getPebbles() // http factory, makes a request for data 

$scope.tab = function (color) { 
    $scope.pebbles = getPebbles(color) 
} 

Answer 1

一點點簡單的運行緩存將讓你去：

控制器：

$scope.colors = ['blue','red','orange','purple'] 
// $scope.pebbles = getPebbles(); // http factory, makes a request for data 
$scope.pebbles = []; 

$scope.tab = function (color) { 
    $scope.selectedColor = color; 
    $scope.pebbles[color] = $scope.pebbles[color] || getPebbles(color); 
} 

模板：

<table class="table table-striped table-bordered bootstrap-datatable datatable"> 
    <thead> 
    <tr> 
     <th>Pebble Name</th> 
     <th>Pebble Type</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="pebble in pebbles[selectedColor]"> 
     <td>{{pebble.name}}</td> 
     <td>{{pebble.type}}</td> 
    </tr> 
    </tbody> 
</table> 

Answer 2

在世界的角度，分享跨控制器/視圖中的數據的方法是使用服務。他們堅持在控制器之間。

我正要寫一個很好的答案，但我認爲這個問題的答案已經完成。

Better design for passing data to other ng-view's and persisting it across controllers

Answer 3

的Stewie的回答得到有效地完成任務，但我想提出另一個設計，你可能使用。

現在，你的控制器似乎混合了兩個問題;顏色管理（標籤），以及給定顏色（標籤內容）的鵝卵石管理。

你可以做的是，有兩個控制器，每個控制器都管理這些問題之一。這使您可以擁有清晰角色的控制器並保持您的控制器纖薄。從長遠來看，隨着向控制器添加更多功能，它將保持您的代碼的可維護性。這是一個蹲點，我創建了一個overviewController（處理標籤管理）和一個pebblesController（處理單個標籤內容）。

http://plnkr.co/edit/1ZP92VX0RljrsrfPpt0X?p=preview
**我僞造了服務器端getPebbles() HTTP請求和創建「平」的標籤，因爲我不想和使實際黏合打擾。

與此實施注意事項;動態標籤加載（僅在第一次切換時才加載標籤內容）變得更加困難，Stewie的運行時緩存示例處理得非常好。在我的搶劫者中，所有的標籤內容都是預先加載的。如果你想保持這種設計模式並且有動態標籤加載，它可能會在tab指令本身支持它最乾淨，但這不在這個問題的範圍之內。

Answer 4

所以我猜你正在使用Angular's UI-Bootstrap爲你的標籤建模。

由於Stewie建議您可以使用一個簡單的緩存來緩存您加載的標籤，並且據我所知您希望在用戶激活它們時按需加載標籤。

結帳小Plunkr我做到了，這完全是。我使用select表達式來加載更改上的選項卡，無論是從緩存還是從後端。

的主要代碼住在一個控制器：

app.controller('PebblesCtrl', function ($scope, $http) { 

    $scope.colors = ['blue', 'red', 'orange', 'purple']; 
    $scope.pebbles = []; 

    $scope.loadPebbles = function (color) { 
    if (!$scope.pebbles[color]) { 
     console.log('loading "' + color + '" pebbles'); 
     $http.get(color + '.json').then(function (response) { 
     $scope.pebbles[color] = response.data; 
     }); 
    } 
    }; 
}); 

也可以顯示一個佔位符，爲您的內容

<tab ng-repeat="color in colors" heading="{{color}}" select="loadPebbles(color)">  
    <div ng-show="pebbles[color]"> 
    <div ng-include="'_pebbles.html'"></div> 
    </div> 
    <div ng-hide="pebbles[color]"> 
    Please Wait... 
    </div> 
</tab> 

當數據被從服務返回的將被替換。