Question

请参阅以下AngularJS代码示例：

实施例。 1：

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
        <div ng-app="" ng-init="quantity=1;cost=5">
            <p>Total in dollar: <span ng-bind="{{quantity * cost}}"></span></p>
        </div>
    </body>
</html>

上述计划的输出为：总计美元：5

实施例。 2：

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
        <div ng-app="" ng-init="firstName='John';lastName='Doe'">
            <p>The full name is: <span ng-bind="{{firstName + ' ' + lastName}}"></span></p>
        </div>
    </body>
</html>

以上程序的输出为：全名为：

为什么全名不会出现在第二个程序的输出中？

Answer 1

您不应在{{}}指令

中再次使用ng-bind插值

ng-bind="(quantity * cost)"

ng-bind="firstName + ' ' + lastName"

第一个工作的原因是quantity * cost的评估结果，5尝试使用scope评估为5，但是当我们通过firstName + ' ' + lastName时，它在控制台中抛出错误$parser: Syntax错误。

错误背后的原因是，它首先尝试评估{{}}插值，哪个输出为John Doe＆amp;之后它评估结果并尝试再次在范围内搜索，它试图在范围内搜索John Doe（在其中有空格的正确变量名称）。因为它会抛出错误。

你可以尝试一件事，改变你的ng-bind，使其没有像ng-bind="{{firstName + lastName}}"那样的空间（只是两个变量的连接）。您可以在控制台中看到错误。但是由于JohnDoe变量在范围内不可用，您仍然不会在屏幕上看到任何输出。因此，只需尝试在JohnDoe上添加ng-init的某些值（仅用于测试），例如ng-init="JohnDoe='Mytest'"，它就会显示输出。

使用ng-bind的首选方式是{{}}

字符串表达式不适用于ng-bind指令，而数字表达式可以吗？

1 个答案: