Angularjs 我如何才能有效地重用分部代码？

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

以下是一个例子：

我的选项卡都使用

$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>

 <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)
}

---

稍微简化一点运行时缓存将使您能够：

控制器：

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;
      });
    }
  };
});

$scope.colors=[“蓝色”、“红色”、“橙色”、“紫色”]
//$scope.pebbles=getPebbles（）；//http工厂，发出数据请求
$scope.pebbles=[]；
$scope.tab=函数（颜色）{
$scope.selectedColor=颜色；
$scope.pebbles[color]=$scope.pebbles[color]| | getPebbles（color）；
}

模板：

卵石名称
卵石型
{{pebble.name}
{{pebble.type}

一点简单的运行时缓存可以让您继续：

控制器：

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;
      });
    }
  };
});

$scope.colors=[“蓝色”、“红色”、“橙色”、“紫色”]
//$scope.pebbles=getPebbles（）；//http工厂，发出数据请求
$scope.pebbles=[]；
$scope.tab=函数（颜色）{
$scope.selectedColor=颜色；
$scope.pebbles[color]=$scope.pebbles[color]| | getPebbles（color）；
}

模板：

卵石名称
卵石型
{{pebble.name}
{{pebble.type}

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

我正准备写一个漂亮的答案，但我想这个问题的答案已经完成了

---

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

我正准备写一个漂亮的答案，但我想这个问题的答案已经完成了

---

Studie的回答有效地完成了任务，但我想建议另一种可能使用的设计

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

相反，您可以使用两个控制器，每个控制器管理其中一个关注点。这允许您拥有具有明确角色的控制器，并保持控制器纤细。从长远来看，当您向控制器添加更多功能时，它将保持代码的可维护性。这是一个plunker，我在其中创建了一个

概览控制器

（处理选项卡管理）和一个

鹅卵石控制器

（处理单个选项卡内容）

**我伪造了服务器端的

getPebbles（）

http请求，创建了“扁平”选项卡，因为我不想费心制作实际的选项卡

---

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

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

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

相反，您可以使用两个控制器，每个控制器管理其中一个关注点。这允许您拥有具有明确角色的控制器，并保持控制器纤细。从长远来看，当您向控制器添加更多功能时，它将保持代码的可维护性。这是一个plunker，我在其中创建了一个

概览控制器

（处理选项卡管理）和一个

鹅卵石控制器

（处理单个选项卡内容）

**我伪造了服务器端的

getPebbles（）

http请求，创建了“扁平”选项卡，因为我不想费心制作实际的选项卡

---

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

所以我猜您正在使用它对选项卡进行建模

正如Stewie所建议的，您可以使用一个简单的缓存来缓存加载的选项卡，而且据我所知，您希望在用户激活选项卡时按需加载它们

看看我做的那一点，这正是我要做的。我使用

select

expression从缓存或后端加载更改选项卡

主代码位于控制器中：

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>

请稍候。。。

---

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

所以我猜您正在使用它为选项卡建模

正如Stewie所建议的，您可以使用一个简单的缓存进行缓存