1

我开始经常遇到这个问题。场景是我有一个我想重用的部分。问题是，我必须在范围内覆盖我以前的数据，以便新数据显示在部分中。我想知道人们是如何解决这个问题的。

这是一个例子：

我有所有使用$scope.pebbles和共享相同部分的选项卡。对于每个选项卡，我希望填充不同的数据。所以很自然，我只会对数据发出新请求并将其存储回变量以更改数据，例如：$scope.pebbles = getPebbles(color). 这样做的问题是每次更改选项卡时都必须提出新请求。有没有更好的方法来解决这个问题而没有很大的部分？

概述.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)
}
4

4 回答 4

2

一点简单的运行时缓存会让你继续前进：

控制器：

$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>
于 2013-07-28T21:03:51.470 回答
2

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

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

更好的设计将数据传递给其他 ng-view 并跨控制器持久化

于 2013-07-29T02:16:26.690 回答
0

所以我猜你正在使用Angular 的 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>

当服务返回数据时，它将被替换。

于 2013-07-29T20:05:42.987 回答
0

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

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

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

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

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

于 2013-07-29T16:16:03.637 回答