Angular.JSディレクティブには、中括弧が必要です。

Question

私はAngular.JSのコードチュートリアルをやっていて、特に1つのセクションで私を混乱させました。ここで私が参照しているコードスニペットです：特に

<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

まず、あなたはこれらの規則は完全に任意であることを理解すべきです。彼らは角度のある作家によって決定されました。たとえば、感嘆符のような他の文字を簡単に使用できました。

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

これらの値はコードではありません。それらは単なる文字列（プレーンテキスト）です。これらの文字列を解析し、それらの意味を理解する角度のjavascriptがあります。すべての文字をループし、中かっこのような特定のキー文字を探します。

言われているように、彼らは彼らがした文字を選んだ理由があります。彼らはhtmlでjavascriptを模倣しようとしています。 ng-clickに渡された値は、javascriptの関数呼び出しを表します。偶然ではなく、これはあなたがng-classに渡された値

tabs.setTab(1) 

... JavaScriptで関数を呼び出す方法です、しかし、関数呼び出しを模倣されていません。オブジェクトを模倣しています。これはjavascriptでオブジェクトを宣言する方法です...

{ active: tabs.isSet(1) } 

これは、そのクラスが適用されるべきかどうかの角度を伝えるブールに評価activeの鍵とtabs.isSet(1)の値を持つオブジェクト、

Answer 2

それはあなたが使用しているディレクティブに依存します。ブール値を設定しようとしているだけの場合は、関数呼び出しまたは単一のブール値のコントローラーパラメーターで十分です。他のディレクティブはより複雑で、異なるパラメータ要件を持つことがあります。独自の指令を作成するときは、まず見つけます。

ngClassの場合、条件付きで複数のクラスを同時に設定できるためです。これを行うにはいくつかの方法がありますが、構文はかなり明確です（documentation）。

これは、ドキュメントからの例です。ここで

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

は、関連plunkrだ：すべてのhttps://plnkr.co/edit/?p=preview