javascript - 是什么让 Angular.JS 指令需要用大括号括起来？

Question

我一直在做一个关于 Angular.JS 的代码学校教程，其中一个部分让我特别困惑。这是我引用的代码片段:

<section class="tab" ng-controller="TabController as tabs">
    <ul class="nav nav-pills">
      <li ng-class="{active:tabs.isSet(1)}">
        <a href ng-click="tabs.setTab(1)">Description</a></li>
      <li ng-class="{active:tabs.isSet(2)}">
        <a href ng-click="tabs.setTab(2)">Specs</a></li>
      <li ng-class="{active:tabs.isSet(3)}">
        <a href ng-click="tabs.setTab(3)">Reviews</a></li>
    </ul>
</section>

该行特别需要指令中的大括号，以便符合 CodeSchool 标准:

<li ng-class="{active:tabs.isSet(1)}">

我的问题是，另一行的指令如何在不需要大括号的情况下正确通过:

<a href ng-click="tabs.setTab(1)">Description</a></li>

对我来说，似乎由于我正在访问函数 tabs.setTab() 我需要以与以前相同的方式包装它。谁能解释一下为什么会这样？

这里顺便提供一下TabController JS代码供引用:

app.controller('TabController', function(){
    this.tab = 1;

    this.setTab = function(newValue){
      this.tab = newValue;
    };

    this.isSet = function(tabName){
      return this.tab === tabName;
    };
});

Answer 1

首先，您应该明白这些约定完全是任意的。它们是由 Angular 作者决定的。他们可以轻松地使用其他字符，例如感叹号......

ng-class="!active: true, otherClass: false!"

这些值不是代码。它们只是字符串(纯文本)。 Angular 中有一些 JavaScript 可以解析这些字符串并理解它们。它循环遍历每个字符并查找某些关键字符，例如大括号。

话虽如此，他们选择这些 Angular 色是有原因的。他们试图在 html 中模仿 javascript。传递给 ng-click 的值代表 JavaScript 中的函数调用。并非巧合的是，这就是在 javascript 中调用函数的方式...

tabs.setTab(1)

但是，传递给 ng-class 的值并不是模仿函数调用。它正在模仿一个物体。这就是在 javascript 中声明对象的方式...

{ active: tabs.isSet(1) }

这表示一个键为 active 且值为 tabs.isSet(1) 的对象，其计算结果为 bool 值，告诉 Angular 是否应应用该类