Angular表达式的解析方式与控制台不同

Angular expressions resolve differently than the console

本文关键字：控制台 方式 表达式 Angular      更新时间：2023-09-26

我有一个表达式，它在javascript中的运行方式与在angular的{{expressions}}中的运行方式不同。有人能告诉我为什么吗?

表达式:

(parseInt("12px")*2).toString()+"px"

在javascript中求值，解析为24px。在角度表达式中，它是NaNpx。

jsfiddle

{{}}告诉Angular，在你的视图中，你有一个表达式要插入。Angular表达式并不支持所有的JavaScript。在这里查看文档

如果你需要所有的JavaScript。最好将逻辑包装在控制器函数中。

节选自docs:

你可能很容易把Angular的视图表达式想象成JavaScript表达式，但这并不完全正确，因为Angular不使用JavaScript的eval()来计算表达式。你可以把Angular表达式看作JavaScript表达式吗以下差异:

属性评估:所有属性的评估都是针对的作用域执行求值，不像在JavaScript中，表达式对全局窗口求值。

using using using using using using using using using

using using using using using

using using using using

using using using using不像在JavaScript中，试图计算未定义的属性可以生成ReferenceError或TypeError。

No Control Flow Statements:在Angular表达式:条件、循环或throw。

这是因为你试图将字符串解析为带有alpha字符的整数，我猜javascript会为你删除字符，而angular会保留它的文字。

(parseInt("12")*2).toString() + "px";

应该是正确的语法

把parseInt函数放在$scope上，它就工作了。

myApp.controller('MyCtrl', function($scope) {
  $scope.parseInt = parseInt;
  $scope.foo = function() {
    return (parseInt("12px") * 2).toString() + "px";
  }
});

对于Angular表达式，函数是从$scope而不是全局命名空间中获取的。

From the Docs:

  • 上下文: JavaScript表达式是针对全局窗口求值的。在Angular中，表达式是根据作用域对象求值的。

——AngularJS开发者指南——表达式

JSFiddle的DEMO

相关文章：