javascript - 如何制作一个包含 ng-repeat 中使用的 div 的指令？

Question

我的应用程序使用此 HTML 执行 ng-repeat :

    <div class="gridBody">
        <div ng-class="{clicked: row.current == true}"
             ng-click="home.rowClicked($index)"
             ng-dblclick="ctrl.rowDoubleClicked(row)"
             ng-repeat="row in home.grid.view = (home.grid.data | orderBy:ctrl.examOrderBy[ctrl.configService.admin.examOrderBy].key:ctrl.configService.admin.examSortDirection) track by row.examId">

我了解如何执行模板指令，但我不确定是否可以执行一个指令来调用另一个指令，就像这里调用 ng-repeat 一样。 。我怎样才能创建一个指令来允许我像这样调用这个代码块:

    <div grid-body
         order="ctrl.examOrderBy[ctrl.configService.admin.examOrderBy].key"
         direction="ctrl.configService.admin.examSortDirection)"
         track="examId">

基本上我想要一个结合了两个 <div> 的指令以上合为一。我想我需要一个使用 transclude 但我不确定如何使用 transclude 并且我找不到任何类似这样的例子。

Answer 1

你真正想做的是隔离范围

检查我的 Plunker

与您的代码类似，我使用 ng-repeat:

<div employeeform ng-repeat="emp in emplList" passed-model="emp">
</div>

employeeform 是我的属性指令。它是用自己的隔离范围和 Controller 定义的:

empApp.directive('employeeform', [
  function($compile) {

    function RowController($scope) {
      $scope.smyClass = "none";
      $scope.clickMe = function() {
        if ($scope.smyClass == "none") {
          $scope.smyClass = "clicked";
        } else {
          $scope.smyClass = "none";
        }
      };    
    }

    return {
      restrict: "A",
      controller: RowController,
      replace: true,
      scope: {
        passedModel: '='
      },
      templateUrl: "Employee.html"
    };
  }
]);

模板 Employee.html 引用了 Controller 的本地作用域函数和 smyClass 属性:

<div class="{{smyClass}}" ng-click="clickMe()" >
  <div style="display:inline-block; width: 100px;">{{ passedModel.name }}</div>
  <div style="display:inline-block; width: 100px;">{{ passedModel.position }}</div>
  <div style="display:inline-block; width: 100px;">{{ passedModel.salary }}</div>
</div>

由于我没有您的数据和其他来源，因此我创建了一个简单的表格报告。当您单击任何行时，背景会变成黄色。当您取消单击每一行时，它会恢复为正常的白色。这是我模拟点击和取消点击的方式。

摘要:

当指令具有定义的本地范围时:

  scope: {
    passedModel: '='
  },

除了传递的参数(例如passedModel)之外，它与父作用域没有任何共享。这使您可以自由地使用局部变量来定义该特定行(指令)的类。