Angularjs指令解析变量的内容

Angularjs directive parse contents for variables

本文关键字：变量 指令 Angularjs      更新时间：2023-09-26

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

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

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

.row.six.five

我不完全确定如何将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>

嵌套指令就够了。

<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系统的元素，您可以优雅地处理它们。

建议:如果你开始把这些东西嵌套得足够低，你可能会想知道子节点是如何知道在层次结构的哪个位置附着自己的。由于每个子节点都可以为自己的子节点创建一个作用域，一种方法是通过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中原型继承的工作方式，每个子节点将模糊前面的parentNode定义。我将parentNode分配给thisParent作为一个小语义技巧。这让我们在用我们自己的阴影后得到原始值。

总而言之，没有太多的代码来做你想做的事情，但是在这个解决方案中有一个丰富的angular思想子集。

相关文章：