Fatal编程技术网
  • angularjs/
  • Angularjs 字符串表达式不适用于ng bind指令，而数字表达式适用于ng bind指令？

Angularjs 字符串表达式不适用于ng bind指令，而数字表达式适用于ng bind指令？

angularjs

Angularjs 字符串表达式不适用于ng bind指令，而数字表达式适用于ng bind指令？,angularjs,angularjs-directive,expression,angular-ngmodel,ng-bind,Angularjs,Angularjs Directive,Expression,Angular Ngmodel,Ng Bind,请参见以下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">

请参见以下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>

<!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>


总额（美元）：
上述计划的产出为：以美元计的总额：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="quantity=1;cost=5">
            <p>Total in dollar: <span ng-bind="{{quantity * cost}}"></span></p>
        </div>
    </body>
</html>

<!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>


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

<!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>

<!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>
为什么全名没有出现在第二个程序的输出中？

您不应该在
ng bind
指令中再次使用
{{}
插值

ng-bind="(quantity * cost)"

ng-bind="firstName + ' ' + lastName"
第一个工作的原因是
quantity*cost
的评估输出是
5
尝试使用
scope
进行评估，该范围是5，但是当我们通过
firstName+''+lastName
时，它会在控制台中抛出错误，
$parser:Syntax
error

错误背后的原因是，首先它尝试计算
{{}
插值，该插值的输出将是
John Doe
&然后它计算结果并再次尝试在范围内搜索，其中它尝试在范围内搜索
John Doe
（在正确的变量名中有空格）。因为它抛出了一个错误

您可以尝试一件事，将
ng bind
更改为不带空格，例如
ng bind=“{{firstName+lastName}}”
（只是两个变量的串联）。您可以在控制台中看到错误不会发生。但您仍然不会在屏幕上看到任何输出，因为
JohnDoe
变量在范围内不可用。因此，只要尝试在
ng init
（仅用于测试）上为
JohnDoe
添加一些值，如
ng init=“JohnDoe='Mytest'”
，它将显示输出

使用
ngbind
的首选方法是不使用
{{}

那么在第一个例子中它是如何工作的呢？在第一个示例中，它不应该也起作用。我认为第一个也不起作用。试过了，两个都不起作用。这里有一个jsfiddle@PHPLover不起作用。如果我做了上面建议的更改，那么它会起作用。您可能需要再次检查输出。@Imprfectluck请看这里的示例，第一个有效，但第二个无效@Imprfectluck检查控制台
窗口。角度。$$csp不是一个函数。
@PHPLover查看更新的详细答案。这将回答您所有与问题相关的好奇心。谢谢：）