Question

我搜索并找到了一些针对“如何将范围变量分配给html属性标记的值”的文章。参见：

https://docs.angularjs.org/guide/interpolation

How to assign angularjs variable value to html element attribute, such as input elememnt's name attribute

在我的控制器中，我定义了以下内容：

    $scope.reportFields = "{'summary.imageID':'Image ID' }";

在我的html文档中，我定义了以下内容：

    <a href="{{reportFields}}">A TEST EXAMPLE</a>
    <button ng-json-eport-excel title="CSV" class="bt btn-md btn-success" separator="," data="mdcData" report-fields="{{reportFields}}" filename="'mySearch'">

当我将页面带入浏览器时，我发现该页面报告了为我的按钮元素定义{{reportFields}}时的语法解析错误。

     Error: [$parse:syntax] Syntax error: Token '{' invlaid key at column 2 of the expression [{{reportFields}}] starting at [reportFields}}].

如果我放弃使用变量并将值硬编码为：

    <button ng-json-eport-excel title="CSV" class="bt btn-md btn-success" separator="," data="mdcData" report-fields="{'summary.imageID':'Image ID' }" filename="'mySearch'">

它可以编译并正常工作。如果添加“ ng-if”，则可以正确编译，如下所示：

    <button ng-json-eport-excel title="CSV" class="bt btn-md btn-success" separator="," data="mdcData" report-fields="{{reportFields}}" ng-if="reportFields.length > 0" filename="'mySearch'">

此外，当我通过检查器检查生成的HTML时，我可以看到，针对'ahref'标签，angularjs的插值已将'reportFields'转换为'“ {'summary.imageID'：'Image ID'}”' ahref标记，但尚未转换按钮上指定的report-fields标记的值。我也尝试过：

    ng-if="1==1" filename="'mySearch'">

对于我的表达式，应始终评估为true。我的问题（而且我是angularjs的新手，我需要帮助理解）是：

为什么在第二个HTML元素（按钮）而不是第一个HTML元素（href）中使用双倍角度时会出现语法解析错误？
为什么解析错误会随着'ng-if'语句消失

对于

，为什么插值不发生

 report-fields="{{reportFields}}"

但是对于以下情况恰好发生

：

 <a href="{{reportFields}}">A TEST EXAMPLE</a>

感谢您对高级的帮助。皮特

Answer 1

您可能想要的是：

<a ng-href="reportFields">A TEST EXAMPLE</a>

尽管按照您定义reportFields的方式，这也没有任何意义。注意ng-href并没有插值。实际上，您正在将reportFields表达式分配给常规HTML属性href，而Angular无法解释该属性。

Angular将HTML视为模板，而不是尝试像浏览器一样呈现它。它采用该模板并将其转换为浏览器可读的DOM HTML。这有助于解释您所询问的行为。

回答您的问题：

插值（大括号）实际上是具有特殊语法的指令，解析器必须与特殊指令一起对它们进行评估，例如ng-show，ng-repeat，自定义指令等。不保证插值指令将在尝试绑定到另一个指令之前被处理。实际上，诸如report-fields之类的其他指令将获得原始插值标记，而不是预期的数据。这就是引发错误的原因。请参阅插值文档的最后一段

Why mixing interpolation and expressions is bad practice

由于href实际上不是指令-它是一个属性-Angular不会尝试将其视为指令或将其绑定到插值，因此不会引发任何错误。它只是将预期结果输出到DOM：href="parsed value"。
ng-if对于此问题没有特殊帮助，只不过它确实在您的report-fields指令之前进行了解析，然后在false时取消了对该元素的进一步解析。如果在这种情况下没有出现错误，则可能仅是因为if条件评估为false且从未解析过report-fields指令。（看不到所有要确认的代码。）
在错误情况下不会发生插值，因为在错误有机会发生之前就抛出了错误。同样，这是因为在其他指令链接之后会对其进行处理。（虽然我认为有充分的理由，但我不确定他们为什么选择这种设计。）

为什么不能在指令中使用插值？

1 个答案: