Angularjs 指令解析变量的内容

Question

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

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

在这个例子中类我想 select 是：

.行。六 .五

我不太确定如何将 HTML / DOM 传递到指令中进行操作。我已经尝试使用 $compile 和一个前置函数，但没有取得太大进展。

<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 属性。这是您的 child 指令进行通信的共同点。然后，您将像这样定义 children：

.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 指定的，在树的上方某处将有一个 parent 元素称为 grid。这将为您的 link 函数提供一个附加参数，让您可以访问 parent 的控制器。

为 gridCol 再做一个。

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

建议：如果您开始将这些东西嵌套得足够低，您可能想知道 child 如何知道在层次结构中的哪个位置附加自己。由于每个 child 都可以为其自己的后代创建作用域，因此一种方法是通过 link 函数的 $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 中的工作方式，每个 child 都会掩盖前面 parentNode 的定义。我将 parentNode 分配给 thisParent 作为一个小语义技巧。这让我们在用自己的阴影对其进行阴影处理后获得原始值。

总而言之，没有太多的代码可以做您想做的事情，但是此解决方案中包含 angular 想法的丰富子集。

Angularjs 指令解析变量的内容

Angularjs directive parse contents for variables

javascript

angularjs

html-parsing

dom-manipulation

angular-directive