角度 HTML 表达式

Question

我正在学习 Angular js，现在有一个问题，我还没有找到正确的答案。

在模板 HTML 中，您可以使用表达式来显示范围变量或调用范围函数。但我总是看到它的不同版本。

{{name}} 显示变量并绑定它

{{::name}} 相同但没有绑定

userdirective="{{::key}}" 但是这里有什么区别呢？

ng-if="::field.sortable" 使用 ng-if 他们不使用 {{ 但使用 userdirective 他们会使用吗？

userdirective="{condition:isActive(route.name),mdColors:{color:'primary'}}" 最后一个只有一个 {.那是你创建对象的时候。对吧？

也许有人可以帮助我理解所有这些。 非常感谢您的宝贵时间。帕特

Answer 1

{{name}} 如你所说是双向数据绑定

{{::name}}单向数据绑定

userdirective="{{::key}}" 是一个有趣的案例。该语句使用单向绑定到用户指令...这意味着在$digest 之后它只是说userdirective="someValue"

因此，用户指令将该值作为普通值获取。现在我必须对其进行测试，但在指令的scopepart 中应该说@，因此它被读取为字符串而不是表达式。

最后一个就像你构建的任何 JSON 一样

{ name: value?true:false }

根据 angular 评估的条件设置值，其中涉及一些魔法：D

希望对你有帮助

Answer 2

{{ anything here}} - 即角度表达式插值。 Angular interpolation - 在这里您可以找到更多相关信息。基本上认为它会插入您将放在这些括号内的任何内容。因此，如果您将表达式与一些计算或仅与当前范围相关的变量放入表达式，它将所有变量转换为其值并应用计算。

例如：{{scopevar1 + scopevar2}} 如果这个变量有一些值，让它成为1 和2，结果我们会看到3。

:: - 这意味着one time binding。例如{{::scopevar1}} 它将被插值一次并且不会检查scopevar1 的变化，始终保持为第一个值。即使scopevar1 每秒都在变化，模板中的值也是一样的。 Angular Expressions - 在这里你可以找到一些活生生的例子和更多信息。

userdirective="{{::key}}" - 这种情况只不过是为您的指令分配动态值。 UserDirective 期望得到一个简单的值，但我们在 scope 中有它，所以我们需要说：嘿，角度请插入范围变量 - key，但只有一次，所以我的指令将获得值，并且不会寻找key 的更新。 Angular 很乐意这样做！

userdirective="{condition:isActive(route.name),mdColors:{color:'primary'}}" 最后一种情况是您的指令期望获得某种特定的 JSON。而且我们不想在控制器内部构建它。有时在模板中做这些事情更容易。所以我们把特定的对象放在两个属性中：condition, mdColors。并说分配给函数结果的第一个属性，第二个属性是简单对象{color:'primary'}。

就是这样！

Answer 3

{{var}} 是一种双向绑定表达式，而 {{::var}} 是一种单向绑定表达式。带有 :: 的表达式一旦设置就不会改变，它是一次性绑定的候选者。 通过：https://docs.angularjs.org/guide/expression 了解这些方面的更好示例

Answer 4

{{name}} 是您会发现的常规情况。您基本上打印变量 name 并在它更改后更新它。

{{::name}} 相同，但您的值一旦稳定就不会收到更新。

所以在第一种情况下，您的模板会在 name 更改后更新。在后者中，它不是。

userdirective="{{::key}}" 是一个one-way one-time binding。将:: 留在外面，如果密钥更改，您的指令会收到更新。但是，如果指令更改了键，它不会更新父级。

ng-if="::field.sortable" 是双向绑定。变化是双向的。在这种情况下，指令会监视 field.sortable。

userdirective="{condition:isActive(route.name),mdColors:{color:'primary'}}" 用于构建临时对象。一个流行的案例也是ng-class。您可以在控制器中构建此对象，但不要在模板中放置太多逻辑。

无论如何，建议阅读优秀的文档https://docs.angularjs.org/guide