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。您需要将grid指令定义附加到controller属性。这是您的子指令将要通信的共同点。然后，你会像这样定义你的孩子：

.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做另一个。

以这种方式做事的好处是你正在利用角度的解析器，你会以一种非常动态的方式自动连接孩子。您还可以继续更深入地嵌套这些项目。此外，如果元素开始显示不属于您的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作为一个小语义技巧。这可以让我们在用自己的阴影划分后获得原始值。

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

Angularjs指令解析变量的内容

1 个答案: