【原文】https://code.angularjs.org/1.2.23/docs/guide/expression

【翻译者】kowen@live.cn

https://code.angularjs.org/1.2.23/docs/guide/expression 写道

Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}.
For example,these are valid expressions in Angular:

Angular表达式是看起来和javascript类似的代码片段,通常是被放到双层大括号里:{{表达式}}。

例如,下面是一些有效的Angular表达式:

Angular代码

收藏代码

  1. 1+2

  2. a+b

  3. user.name

  4. items[index]

Angular Expressions vs. JavaScript Expressions

Angular 表达式和 js表达式的对比

写道

Angular expressions are like JavaScript expressions with the following differences:

Angular表达式和Javascript表达式非常相似,但有以下几点不同:

Context: JavaScript expressions are evaluated against the global window. In Angular,expressions are evaluated against a scope object.

上下文:Javascript表达式在全局窗口中起作用,Angular的表达式是在scope范围内中起作用。(不太恰当?)

Forgiving: In JavaScript,trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular,expression evaluation is forgiving to undefined and null.

对出错宽大处理:Javascript计算含有未定义属性的表达式会产生ReferenceError或者TypeError,Angular 表达式允许计算含有未命名或者null的表达式。

No Control Flow Statements: you cannot use the following in an Angular expression: conditionals,loops,or exceptions.

禁止流程控制语句:Angular表达式中不能包含条件、循环或者异常语句。

Filters: You can use filters within expressions to format data before displaying it.

过滤器:你可以对Angular表达式进行格式化得到要显示的结果。

写道

If you want to run more complex JavaScript code,you should make it a controller method and call the method from your view. If you want to eval() an Angular expression yourself,use the $eval() method.

如果需要运行比较复杂的Javascript语句,可以在控制器(controller)中创建一个方法,然后从视图(view)中去调用它。如果你想运行eval()计算angular表达式,你应当使用$eval()方法。

You can try evaluating different expressions here:

下面的例子可以计算各种表达式:

index.html

HTML代码

收藏代码

  1. <spanstyle="font-size:14px;">divng-controller="ExampleController"class="expressions">

  2. Expression:

  3. inputtype='text'ng-model="expr"size="80"/>

  4. buttonng-click="addExp(expr)">Evaluate</button>

  5. ulling-repeat="exprinexprstrackby$index">

  6. [ahref=""ng-click="removeExp($index)">Xa>]

  7. tt>{{expr}}>=spanng-bind="$parent.$eval(expr)"spanlidiv>

script.js

Js代码

收藏代码

  1. <spanstyle="font-size:14px;">angular.module('expressionExample',[])

  2. .controller('ExampleController',['$scope',function($scope){

  3. varexprs=$scope.exprs=[];

  4. $scope.expr='3*10|currency';

  5. $scope.addExp=function(expr){

  6. exprs.push(expr);

  7. };

  8. $scope.removeExp=function(index){

  9. exprs.splice(index,1);

  10. };

  11. }]);

  12. </span>

Context

上下文

Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.

Angular不使用Javascript的eval()计算表达式的值,Angular有自己的$parse服务来计算表达式。

Angular expressions do not have access to global variables like window,document or location. This restriction is intentional. It prevents accidental access to the global state � a common source of subtle bugs.

Angular表达式没有访问window、doucument或者location这些全局变量的权限。这样做的目的是:防止不小心访问了相同名称的全局的变量,很多难以排除的bug都是这个原因引起的(应该是这个意思吧)。

Instead use services like $window and $location in functions called from expressions. Such services provide mockable access to globals.

那怎么访问global资源呢?有一个变通的方式:Angular表达式调用的function中,可以使用$window和$location等服务来访问global资源。例子:

divclass="example2"ng-controller="ExampleController">

  • Name:inputng-model="name"type="text"buttonng-click="greet()">Greetbuttonng-click="window.alert('Shouldnotseeme')">Won'tgreetscript.js

    Js代码代码" style="color:rgb(0,['$window','$scope',85);font-weight:bold;">function($window,$scope){

  • $scope.name='World';

  • $scope.greet=function(){

  • $window.alert('Hello'+$scope.name);

  • };

  • }]);

  • </span>

  • Forgiving

    宽大处理

    Expression evaluation is forgiving to undefined and null. In JavaScript,evaluating a.b.c throws an exception if a is not an object. While this makes sense for a general purpose language,the expression evaluations are primarily used for data binding,which often look like this:

    Angular表达式求值对undefined和null都采取了宽大处理的态度。在Javascript中,如果a不是一个对象,那么a.b.c将会抛出一个异常。但是这个表达式本身是有意义的,它主要是用来作数据绑定的,例如

    {{a.b.c}}

    It makes more sense to show nothing than to throw an exception if a is undefined (perhaps we are waiting for the server response,and it will become defined soon). If expression evaluation wasn't forgiving we'd have to write bindings that clutter the code,for example: {{((a||{}).b||{}).c}}

    其实,这种情况与其抛出异常,不如直接啥也不显示(也许是正在等待服务器的相应,等一会就会变成defined了)。如果表达式不进行宽大处理的话,我们写的代码就乱套成这个样子了:{{((a||{}).b||{}).c}}

    Similarly,invoking a function a.b.c() on undefined or null simply returns undefined.

    类似的,调用一个包含undefined或这null的function a.b.c(),返回值是undefined。

    No Control Flow Statements

    禁用流程控制语句

    Apart from the ternary operator (a ? b : c),you cannot write a control flow statement in an expression. The reason behind this is core to the Angular philosophy that application logic should be in controllers,not the views. If you need a real conditional,loop,or to throw from a view expression,delegate to a JavaScript method instead.

    除了三元运算符(a ? b : c),angular表达式中不允许使用流程控制语句。这么做的原因是Angular秉承着这样的思想:程序的逻辑部分应该在控制器中实现,不应该在视图中出现。如果在视图中必须使用条件、循环或者抛出异常,直接使用Javascript方法吧。

    $event

    事件对象

    Directives like ngClick and ngFocus expose a $event object within the scope of that expression.

    ngClick、ngFocus类似的指令会在表达式的有效范围内产生一个$event对象。

    index.html

    HTML代码divng-controller="EventController"buttonng-click="clickMe($event)">Eventpcode>$event>:pre>{{$event|json}}>clickEvent>{{clickEvent|json}}script.js

    Js代码

  • angular.module('eventExampleApp',[]).

  • controller('EventController',85);font-weight:bold;">function($scope){

  • /*

  • *exposetheeventobjecttothescope

  • */

  • $scope.clickMe=function(clickEvent){

  • $scope.clickEvent=simpleKeys(clickEvent);

  • console.log(clickEvent);

  • };

  • *returnacopyofanobjectwithonlynon-objectkeys

  • *weneedthistoavoidcircularreferences

  • */

  • functionsimpleKeys(original){

  • returnObject.keys(original).reduce(function(obj,key){

  • obj[key]=typeoforiginal[key]==='object'?'{...}':original[key];

  • returnobj;

  • },{});

  • }

  • }]);

  • Note in the example above how we can pass in $event to clickMe,but how it does not show up in {{$event}}. This is because $event is outside the scope of that binding.

    注意:这个例子中,$event对象可以传递到clickMe中显示,但是它却不能使用{{$event}}显示,因为$event是在这个绑定的scope之外(也就是$event只在ngClick指定的clickMe中存在)。

    Angular表达式的更多相关文章

    1. 基于JavaScript编写一个图片转PDF转换器

      本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

    2. 详解使用postMessage解决iframe跨域通信问题

      这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    3. HTML5数字输入仅接受整数的实现代码

      这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    4. amaze ui 的使用详细教程

      这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    5. HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

      这篇文章主要介绍了HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

    6. 浅谈html5之sse服务器发送事件EventSource介绍

      本篇文章主要介绍了浅谈html5之sse服务器发送事件EventSource介绍,具有一定的参考价值,有兴趣的可以了解一下

    7. html5简介_动力节点Java学院整理

      这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

    8. HTML5 拖放(Drag 和 Drop)详解与实例代码

      本篇文章主要介绍了HTML5 拖放(Drag 和 Drop)详解与实例代码,具有一定的参考价值,有兴趣的可以了解一下

    9. ios – Swift中的非响应流委托

      所以我在Swift中使用套接字并试图将应用程序与我的服务器连接起来.我让应用程序连接到服务器的IP地址,并在服务器上使用netcat进行测试.在执行期间,应用程序的控制台输出显示它已成功连接到服务器.但是,流委托似乎没有响应.当我输入netcat时,app控制台没有打印任何内容.我已经搜索了很长一段时间,发现我的实现与其他实现非常相似.也许我在这里遗漏了一些我看不到的东西.任何想到这个问题的人都将不胜感激!

    10. ios – UIScrollView内容不允许用户交互

      我有一个启用了分页的UIScrollView,如下所示:在UIScrollView中,我添加了几个UIWebViews,并将其启用的交互设置为是这样的.它打破了UIScrollView上的分页和所有触摸.如果我将用户交互设置为NO,则页面有效,但我无法在UIWebView中突出显示文本.我试着像下面那样对UIScrollView进行子类化,但是会出现同样的情况.任何的想法?

    随机推荐

    1. Angular2 innerHtml删除样式

      我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

    2. 为Angular根组件/模块指定@Input()参数

      我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

    3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

      我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

    4. 离子框架 – 标签内部的ng-click不起作用

      >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

    5. Angular 2:将值传递给路由数据解析

      我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

    6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

      换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

    7. 角度5模板形式检测形式有效性状态的变化

      为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

    8. Angular 2 CSV文件下载

      我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

    9. angularjs – Angular UI-Grid:过滤后如何获取总项数

      提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

    10. angularjs – 迁移gulp进程以包含typescript

      或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

    返回
    顶部