如何有效地重用部分？

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

在 Angular 世界中，跨控制器/视图共享数据的方式是使用服务。它们在控制器之间持续存在。

我正要写一个很好的答案，但我认为这个问题的答案已经完成了。

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

Answer 3

Stewie 的回答有效地完成了工作，但我想建议您可能使用的另一种设计。

现在，您的控制器似乎混合了两个问题；管理您的颜色（标签），以及管理给定颜色的鹅卵石（标签内容）。

您可以做的是拥有两个控制器，每个控制器管理其中一个问题。这使您可以拥有具有明确角色的控制器，并使您的控制器保持苗条。从长远来看，当您向控制器添加更多功能时，它将使您的代码保持可维护性。这是一个 plunker，我在其中创建了一个 overviewController（处理选项卡管理）和一个 pebblesController（处理单个选项卡内容）。

http://plnkr.co/edit/1ZP92VX0RljrsrfPpt0X?p=preview
**我伪造了服务器端 getPebbles() http 请求并创建了“平面”标签，因为我不想费心制作实际的标签。

此实现的注意事项；动态选项卡加载变得更加困难（仅在第一次切换到选项卡内容时才加载），Stewie 的运行时缓存示例处理得很好。在我的 plunker 中，所有选项卡内容都是预先加载的。如果您想保留此设计模式并具有动态选项卡加载，那么在选项卡指令本身中支持它可能是最干净的，但这超出了本问题的范围。

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>

当服务返回数据时会被替换。