Question

我知道{{}}可以解释表达式但是当我尝试在其中使用javascript时，它不像{{"a/b/c/d/".split('/').filter(function(n){return n}).reverse()[0]}}

那样工作

我需要使用它来从url获取slug值。

请建议如何使用angularjs实现此目的，url的来源来自外部Feed，因此我对此的控制非常有限。

Answer 1

不支持完整的JS，即便如此，这也是一种不好的做法。

我建议您至少将其放在控制器的示波器功能中更好的方法是将其放入服务或过滤器中，因此如果您希望稍后将其重新用于其他目的，您可以：

$scope.getSlug = function( str ) {
  return str.split( "/" ).filter(function( n ) {
    return n;
  }).reverse()[ 0 ];
};

然后，在你的模板中：

{{ getSlug( "a/b/c/d/" ) }}
{{ getSlug( myModelProperty ) }}

此外，阅读Angular docs about expressions。

是有效的

Answer 2

你不应该使用这样的模板 - 所以Angular不支持它。在范围内创建一个函数：

$scope.getSlug = function (input) {
    return input.split('/').filter(function(n){return n}).reverse()[0];
}

或者创建一个可以实现您想要的效果的过滤器：

angular.module('myModule').filter('myFilter', function () {

    return function (input) {
         if (!input) return input;

         return input.split('/').filter(function(n){return n}).reverse()[0];
    };
});

并像这样使用它：

<div>{{"a/b/c/d" | myFilter}}</div>

Answer 3

{{}}告诉Angular你在视图中有一个要插值的表达式。 Angular表达式不支持所有JavaScript。有关文档check here。

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

摘自文档：

将Angular视图表达式视为可能很诱人   JavaScript表达式，但这并不完全正确，因为   Angular不使用JavaScript eval（）来计算表达式。您   可以将Angular表达式视为JavaScript表达式   以下差异：

属性评估：所有属性的评估都是针对的   范围进行评估，不像JavaScript中的表达式   根据全局窗口进行评估。

原谅：表达式评估是对forfined和null的宽容，   与JavaScript不同，它试图评估未定义的属性   可以生成ReferenceError或TypeError。

无控制流声明：您无法执行以下任何操作   角度表达式：条件，循环或抛出。

如何在{{}} AngularJS中使用JavaScript

3 个答案: