Angularjs 指令解析变量的内容
Angularjs directive parse contents for variables
我正在尝试构建可用于控制网格布局的 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>
嵌套指令就是这样。
<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 想法的丰富子集。
我正在尝试构建可用于控制网格布局的 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>
嵌套指令就是这样。
<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 想法的丰富子集。