Question

我试图在AngularJS中创建一个递归模板。我已经阅读了很多关于它的博客帖子和SO帖子，但无法让我的代码工作。

我试图制作一个递归模板，用变量和运算符渲染简单的嵌套表达式。在这种情况下，数据树中的节点可以是多种类型中的一种，并且每种类型的呈现方式不同。我尝试使用一个Angular模板ng-switch和ng-include解决此问题。

模板：

<script type="text/ng-template" id="expression.tpl">
    <ng-switch on="expression.type">
        <span ng-switch-when="two-sided-operator">
            <ng-include src="'expression.tpl'" ng-init="expression = expression.left"></ng-include>
            {{ expression.operator }}
            <ng-include src="'expression.tpl'" ng-init="expression = expression.right"></ng-include>
        </span>
        <span ng-switch-when="variable"> {{ expression.name }} </span>
        <span ng-switch-when="literal"> &quot;{{ expression.value }}&quot;</span>
    </ng-switch>
</script>

<ng-include src="'expression.tpl'" onload="expression=testExpression"></ng-include>

数据：

$scope.testExpression = {
    type: "two-sided-operator",
    left: {
        type: "variable",
        name: "foo"
    },
    operator: "==",
    right: {
        type: "literal",
        value: "bar"
    }
};

然而，这并没有呈现任何东西。如果我删除内部ng-include，它至少会呈现expression.operator。

谁能告诉我我做错了什么？在expression声明中对ng-init的作业是否存在问题？

感谢您阅读此内容！

Answer 1

最后通过使用ng-repeat的黑客来解决这个问题。工作模板：

<script type="text/ng-template" id="expression.tpl">
    <ng-switch on="expression.type">
        <span ng-switch-when="two-sided-operator">
            <span ng-repeat="expression in [expression.left]" ng-include="'expression.tpl'"></span>
            {{ expression.operator }}
            <span ng-repeat="expression in [expression.right]" ng-include="'expression.tpl'"></span>
        </span>
        <span ng-switch-when="variable"> {{ expression.name }} </span>
        <span ng-switch-when="literal"> &quot;{{ expression.value }}&quot;</span>
    </ng-switch>
</script>

我不明白ng-include足以解释它为什么不起作用的原因：）

使用ng-include和onload的递归模板不呈现任何内容

1 个答案: