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>组合成一个的指令。我想我需要一个使用转换，但我不确定如何使用转换而我找不到任何像这样的例子。

Answer 1

你真正想做的是隔离范围

检查我的Plunker

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

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

employeeform是我的属性指令。它由它自己的孤立范围和控制器定义：

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引用了控制器的本地作用域函数和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: '='
  },

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

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

1 个答案:

检查我的Plunker