javascript - 子访问父隔离范围: cell content access cell scope

Question

我可能对范围有点困惑(我读过很多关于它的教程，但此时我不明白如何制作这个东西)，无论如何，这就是我想要做的:

我有一个包含各种单元格的表格

<table my-table>
  <tr>
    <td my-table-cell>
      <span ng-if="!myTableCellStatus.editing">Bla 1</span>
      <input ng-if="myTableCellStatus.editing" type="text" name="value" value="Bla 1">
    </td>
    <td my-table-cell>
      <span ng-if="!myTableCellStatus.editing">Bla 2</span>
      <input ng-if="myTableCellStatus.editing" type="text" name="value" value="Bla 2">
    </td>
  </tr>
  <tr>
    <td my-table-cell>
      <span ng-if="!myTableCellStatus.editing">Bla 3</span>
      <input ng-if="myTableCellStatus.editing" type="text" name="value" value="Bla 3">
    </td>
    <td my-table-cell>
      <span ng-if="!myTableCellStatus.editing">Bla 4</span>
      <input ng-if="myTableCellStatus.editing" type="text" name="value" value="Bla 4">
    </td>
  </tr>
</table>

和 my-table-cell 指令

angular.module('myApp').
  directive('myTableCell', [
    ->
      require:  '^myTable'
      restrict: 'AC'
      scope: {}
      link: ($scope, element, attrs, myTable) ->
        # XXX: I have some code here that allows me to access the cell from myTable
        #      I change the status from there
        myTable.addCell(
          changeStatus: (status) ->
            $scope.$apply ->
              $scope.myTableCellStatus.editing = status
          cell: element
        )
        $scope.myTableCellStatus =
          editing: false

  ])

现在，我的想法是:使 my-table-cell 成为具有隔离范围的指令。然后在其子级中访问它以显示/隐藏各种元素。

这可能吗？在我的代码中，看起来我无法以任何方式绑定(bind)到 my-table-cell 范围的任何值，可能是因为它是隔离的。

考虑到我很困惑，关于它的代码示例会很可爱，我最初认为这是正确的方法，但现在看来我完全错了。

Answer 1

隔离范围在大多数情况下都很好，但在您的情况下它没有帮助。如果您希望指令中包含 HTML，并且希望向这些 HTML 元素公开自定义属性(例如 myTableCellStatus)，并且由于该 HTML 不是来自您的指令模板- 您需要一个“正常”(即非隔离)范围:

app.directive('myTableCell', function () {
    return {
        ...
        scope: true,
        link: function postLink(scope, element, attrs, myTable) {
            ...
            scope.myTableCellStatus = {editing: false};
        }
    };
});

<小时/>

另请参阅此 short demo 。