【问题标题】:Angular repeat directive syntax角度重复指令语法
【发布时间】:2015-06-20 20:44:14
【问题描述】:

我是 AngularJS 的新手,在学习 Codecademy 课程时我被卡住了。我试图使用以下语法重复指令。

<div class="card" ng-repeat="app in apps">
  <app-info info="{{ app }}"></app-info> 
</div>

我玩了一会儿,发现我需要去掉花括号。

<div class="card" ng-repeat="app in apps">
  <app-info info="app"></app-info> 
</div>

但如果我不使用指令,我想我会访问这样的信息。 AngularJS documentation.

<div class="card" ng-repeat="app in apps">
  {{ app }}
</div>

有人可以解释为什么我不需要花括号来帮助我更好地理解 AungularJS。谢谢!

【问题讨论】:

标签: javascript html angularjs


【解决方案1】:

插值符号{{}}的使用取决于指令的实现。 一些指令,如 ng-click='expression'ng-if='expression' 采用不带双花括号的表达式。

而其他一些指令,例如 ng-src='{{expression}}' 接受插值符号。

这完全取决于指令的设置方式。

插值的基本用法是执行表达式并将内容替换为表达式的返回值(字符串值)。

随着您了解有关指令的更多信息,您将了解如何使用@,=,&amp; 将参数传递给指令。这些参数可以是简单的字符串值(在这种情况下可以使用插值)、对象或函数。

【讨论】:

    【解决方案2】:

    在这种特殊情况下,使用 {{data}} 您正在评估该变量的值,但是当您在其他包含名为 scope 变量的指令中执行 info="app" info 时,您正在做的是绑定info 我们的app-info 指令的范围变量到控制器(或父指令) app 范围变量。

    【讨论】:

    • 我想我明白你在说什么。你能用更简单的语言来回答你的问题,以便更容易理解吗?
    • 默认情况下,Angular 指令的属性值被假定为 expressions 并被评估为这样,但在元素的文本节点的上下文中,它们被假定为纯文本并需要花括号通知parser 花括号之间的文本是一个角度表达式。
    • @HJ05 那么你认为app in apps是这样的表达方式吗?没有默认值。
    • @zeroflagL 是的 app in apps 是一个表达式,当您开始添加过滤器(例如 app in apps | filter: search)时,这一点变得更加明显。任何被 Angular 运行时求值的字符串都是一个表达式。另请查看@Chandermani 的答案以获取更多信息。
    • app in appsrepeat_expression,您可以应用filters 或别名as alias,即使您可以将ng-repeat 与对象一起使用,并且它的键值对(key, value) in expression。这意味着将评估expression。根据您的偏好或方法,您可以评估控制器上的结果,以便所有逻辑都在控制器中,从而获得更清晰的视图。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-06-28
    • 1970-01-01
    • 2014-09-10
    • 1970-01-01
    • 2016-05-05
    • 2017-02-26
    • 2012-08-14
    相关资源
    最近更新 更多