What makes an Angular.JS directive require curly braces around it?

Question

I've been doing a codeschool tutorial on Angular.JS and one section in particular confused me. Here's the code snippet I'm referring to:

<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>

This line in particular needs curly braces in the directive to be correct by CodeSchool standards:

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

My question is, how come this other line's directive comes through correctly without the need of curly braces:

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

To me, it would seem that since I'm accessing the function tabs.setTab() I would need to wrap it in the same way as before. Can anyone explain why this is the case?

Here's the TabController JS code by the way for reference:

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

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

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

Answer 1

It depends on the directive you're using. If you're just trying to set a boolean, a function call or a single boolean controller parameter might suffice. Other directives might be more complicated and have different parameter requirements. You'll find out when you start making your own directives.

In the case of ngClass , it is because you can set multiple classes at once, conditionally. There are several ways of doing this, but the syntax is fairly clear ( documentation ).

This is an example from the docs:

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

Here's the related plunkr: https://plnkr.co/edit/?p=preview

Answer 2

First of all, you should understand that these conventions are completely arbitrary. They were decided by the angular authors. They could have easily used some other character, like an exclamation point for example...

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

These values are not code. They are just strings (plain text). There is some javascript in angular that parses these strings and makes sense of them. It loops over every character and looks out for certain key characters, like curly braces.

That being said, there is a reason they chose the characters they did. They are trying to mimic javascript in html. The values passed to ng-click represent a function call in javascript. Not coincidentally, this is how you call a function in javascript...

tabs.setTab(1)

The value passed to ng-class , however, is not mimicking a function call. It is mimicking an object. This is how you declare an object in javascript...

{ active: tabs.isSet(1) }

This represents an object with a key of active and a value of tabs.isSet(1) , which evaluates to a boolean telling angular whether that class should be applied