Angularjs 指令解析变量的内容

Question

我正在尝试构建一个可用于控制网格布局的角度指令。

指令是标签，但我想做的是解析这个标签内的 DOM 元素并创建一个嵌套的行和列宽数组。列可以包含更多的行和列，所以我希望能够解析这些。

在这个例子中，我想选择的类是：

.row 。六 .五

我不完全确定如何将 HTML / DOM 传递到指令中进行操作。 我曾尝试使用 $compile 和 pre 函数，但没有取得太大进展。

<grid>
    <div class="ui row">
        <div class="ui six wide column" >lorem</div>
        <div class="ui five wide column" >ipsum</div>
    </div>
    <div class="ui row" >
        <div class="ui five wide column" >lorem</div>
        <div class="ui seven wide column" >ipsum</div>
    </div>
</grid>

Answer 1

嵌套指令就是这样。

<grid>
    <div grid-row class="ui row">
        <div grid-col class="ui six wide column" >lorem</div>
        <div grid-col class="ui five wide column" >ipsum</div>
    </div>
    <div grid-row class="ui row" >
        <div grid-col class="ui five wide column" >lorem</div>
        <div grid-col class="ui seven wide column" >ipsum</div>
    </div>
</grid>

在这里，我们引入了两个新指令，grid-row 和 grid-col。您需要将controller 属性附加到您的grid 指令定义。这是您的子指令将进行通信的共同点。然后，您将像这样定义您的孩子：

.directive('gridRow', function() {
  return {
    restrict: 'AEC',
    require: '^grid',
    link: function(s, e, a, ctrl) {
      // ctrl is the controller you defined at the grid level.
    } 
  }
});

注意我们是如何通过require 指定的，在树的某处会有一个父元素，称为grid。这将在您的 link 函数中为您提供一个额外的参数，让您可以访问您父母的控制器。

为gridCol再做一个。

以这种方式做事的好处是您正在利用 Angular 的解析器，并且您会以一种非常动态的方式自动连接子节点。您还可以继续将这些项目嵌套得越来越深。此外，如果开始出现不属于您的grid-col/grid-row 系统的元素，您可以优雅地处理它们。

建议：如果您开始将这些东西嵌套得足够低，您可能会想知道孩子是如何知道在层次结构中将自己附加到何处的。由于每个孩子都可以为自己的后代创建范围，因此一种方法是通过链接函数的$scope：

link: function(scope, e, a, ctrl) {
  var thisParent = scope.parentNode;
  if (!thisParent) {
    scope.parentNode = ctrl.addChild(scope);
  } else {
    scope.parentNode = thisParent.addChild(scope);
  }
}

由于原型继承在 java 中的工作方式，每个孩子都会掩盖parentNode 的前面定义。我将parentNode 分配给thisParent 作为一个小的语义技巧。这让我们可以在用我们自己的遮蔽它之后获得原始值。

总而言之，没有多少代码可以做你想做的事，但是这个解决方案中有很多角度的想法。