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

这取决于您使用的指令。如果您只是尝试设置布尔值，则函数调用或单个布尔控制器参数可能就足够了。其他指令可能更复杂，并且具有不同的参数要求。当你开始制定自己的指令时，你会发现它们。

对于ngClass，这是因为您可以有条件地一次设置多个类。有几种方法可以做到这一点，但语法相当清晰（documentation）。

这是文档中的一个示例：

<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>

以下是相关的plunkr：https://plnkr.co/edit/?p=preview

Answer 2

首先，您应该了解这些约定完全是任意的。他们是由有角度的作者决定的。他们可以很容易地使用其他一些字符，例如感叹号......

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

这些值不是代码。它们只是字符串（纯文本）。在角度中有一些javascript可以解析这些字符串并理解它们。它遍历每个角色，并寻找某些关键字符，如花括号。

话虽如此，他们选择他们所做的角色是有原因的。他们试图在html中模仿javascript。传递给ng-click的值表示javascript中的函数调用。不巧的是，这就是你在javascript中调用函数的方式......

tabs.setTab(1)

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

{ active: tabs.isSet(1) }

这表示一个键为active且值为tabs.isSet(1)的对象，其值为布尔值，表示角度是否应该应用

什么使Angular.JS指令需要围绕它的花括号？

2 个答案: