在视图中使用正则表达式

Question

我有一个这样的控制器：

function Ctrl( $scope ){

    $scope.str = " Misty Mountain Hop ";

}

还有这样的视图：

<div ng-controller="Ctrl">

    <p>{{ str }}</p>       <!-- This one is ok -->
    <p>{{ str.split( "Mountain")[0] }}</p>   <!--Even this one is fine too -->
    <p>{{ str.replace( /Mountain/ , "Plain" ) }}</p>  <!-- This one is bad -->

</div>

所以如果我尝试使用replace 方法，它会报错：

Syntax Error: Token 'Mountain' is unexpected ... 

http://jsfiddle.net/H3ztj/

问题是：为什么？

Answer 1

由于您的问题是“为什么？”，答案是插值块中的表达式不是 JavaScript 表达式，而是Angular expressions。它们看起来很像 JavaScript（故意），但 Angular 使用自己的解析器来解析代码。

这样，它可以做的不仅仅是评估一次表达式：它还可以做一些事情，比如分析依赖关系，所以它可以观察成分并在这些成分发生变化时进行更新。它还可以评估相对于$scope 的表达式，以便{{foo}} 返回$scope.foo，而不是一个名为foo 的全局变量（这反过来又使ngRepeat 之类的东西起作用）。

当 Angular 团队实现 Angular 表达式时，他们显然没有实现正则表达式。这并不奇怪——这种代码无论如何都应该在您的控制器中，您可以在其中进行测试。