子访问父隔离作用域:单元格内容访问单元格作用域

Child access parent isolated scope: cell content access cell scope

本文关键字：单元格 作用域 访问 隔离      更新时间：2023-09-26

我可能对作用域有点困惑(我已经读了很多关于它的教程，但在这一点上我不明白如何做这件事)，无论如何，这就是我想做的:

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

<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作用域的任何值，可能是因为它是孤立的。

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

隔离作用域在大多数情况下都很好，但在您的情况下它没有帮助。如果你想在你的指令中有HTML，你想暴露自定义属性到那些HTML元素(例如myTableCellStatus) -因为这个HTML是而不是来自你的指令的模板-你需要一个"正常"(即非隔离)范围:

app.directive('myTableCell', function () {
    return {
        ...
        scope: true,
        link: function postLink(scope, element, attrs, myTable) {
            ...
            scope.myTableCellStatus = {editing: false};
        }
    };
});
这个<<p>看到,strong>短演示。

当你为你的指令定义一个孤立的作用域时，你是在为你的作用域变量定义一个私有的沙箱。从隔离作用域定义或引用的变量将不使用作用域继承来解析绑定。

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

scope: { 
      myTableCellStatus: '='
}

这将在父作用域中解析的myTableCellStatus变量和独立作用域中同名的作用域变量之间建立一个双向模型绑定。

或者你可以在你的链接函数中引用$parent: 

  $scope.$parent.myTableCellStatus

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

[编辑]

现在可能很明显，如果你引用$parent，你就从你的孤立作用域延伸到你的父作用域，如果父作用域被共享，它将在你所有的指令中绑定到同一个模型。如果您在an - ng-repeat中，这将有效，因为它创建了子作用域。但是如果你不在子指令中，模型就会被共享。

相关文章：