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)外，它与父作用域没有任何共享。这使您可以自由使用局部变量来定义该特定行(指令)的类。