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指向具有孤立范围的指令。然后在其子项中访问它以显示/隐藏各种元素。

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

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

Answer 1

隔离范围大部分时间都很好，但在你的情况下它不会有帮助。如果您希望在指令中包含HTML，并且希望将自定义属性公开给这些HTML元素（例如myTableCellStatus） - 并且因为此HTML 来自您的指令＆＃39; s模板 - 你需要一个＆＃34;正常＆＃34; （即非孤立的）范围：

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

另请参阅此 short demo 。

Answer 2

为指令定义隔离范围时，您将为范围变量定义私有沙箱。从隔离范围定义或引用的变量不会使用范围继承来解析绑定。

要解决此问题，您可以通过元素属性将模型从父作用域传递到隔离作用域。在您的指令定义中：

scope: { 
      myTableCellStatus: '='
}

这将在父作用域上解析的myTableCellStatus变量与具有相同名称的隔离作用域上的作用域变量之间建立双向模型绑定。

或者您可以在链接功能中引用$ parent：

  $scope.$parent.myTableCellStatus

这是有效的，因为您从隔离范围引用父范围，它使用范围继承来解析绑定。

[编辑]

现在可能很明显，如果您引用$ parent，那么您将从隔离范围伸出并进入父范围，如果共享将在所有指令中绑定到同一模型。如果你在一个ng-repeat中，这将有效，因为它创建了一个子范围。但是如果你不在子指令中，那么该模型将被共享。

子访问父隔离范围：单元内容访问单元范围

2 个答案: