2015-01-03 5 views
6

私はの要素についてAngular Google Mapsというプラグインについて質問があります。 Windows要素のドキュメントのサンプルソースコードでは、<ui-gmap-windows>要素の<div>にはng-non-bindableという属性が使用されています。明らかに、角度バインディングがページ上で正しくレンダリングされるためには、これが必要です。特に、official Angular documentation on ng-non-bindableは、注釈付きHTML要素内の角度リテラルがAngularで解析されないことを明確にしているため、この属性が必要な理由については疑問があります。属性としてng-non-bindableなければAngular Google Mapsの<ui-gmap-windows>要素にng-non-bindableが必要ですか?

<ui-gmap-markers models="markers" coords="'self'"> 
    <ui-gmap-windows> 
    <div>{{name}}: {{description}}</div> 
    </ui-gmap-windows> 
</ui-gmap-markers> 

:説明するために

、これは私のHTMLのコードのスニペット部分(このウィンドウ要素のスコープ内の属性モデルは、名前と説明フィールドを持っていると仮定)であります<div>(またはdivなし)に設定すると、モデルの値はこれらの角度リテラルにバインドされません。コロンだけがウィンドウ内にレンダリングされます(":"のように)。しかし、私は属性に入れたら:

<ui-gmap-markers models="markers" coords="'self'"> 
    <ui-gmap-windows> 
    <div ng-non-bindable>{{name}}: {{description}}</div> 
    </ui-gmap-windows> 
</ui-gmap-markers> 

をし、ウィンドウのテキストが正しくレンダリングされます。 のようになります。「場所1:場所1です。」

ここでもまた、ng-non-bindableがなぜ必要なのか不思議です。これはAngularライブラリを理解するのに大いに役立ちます。おそらく、Angularは全体としてはより良いでしょう。

答えて

7

これは基本的に、テンプレートの手動編集を行うui-gmapに似ています。通常、「指令」は、いないコンテンツをtranscludingされるので、「someBindingが」インスタンス化された「指令」にスコープにバインドされていることを意味

<directive> 
    <some-html>{{someBinding}}</some-html> 
<directive> 

:あなたが何かを持っている場合、標準の角度で

"指示" innerScope。

しかし、UI-GMAPの場合:

<ui-gmap-windows> 
    <some-html>{{someBinding}}</some-html> 
</ui-gmap-windows> 

スコープが作成された各ウィンドウではなく、UI-GMAP-ウィンドウのインスタンス化の範囲にする必要があります。したがって、バインド不可の場合、スコープはui-gmap-windowsインスタンスになり、someBindingは存在しません。

本質的にui-gmapはインスタンス化された各ウィンドウオブジェクトに適用するためのテンプレートとしてtranscluded要素を使用していますが、angleがそこに入り、その要素を間違ったスコープにバインドすると、ui-gmapは正しい範囲。あなたのためのビットを明確に

希望。別のノートで

あなたが同時に表示されるウィンドウの数を必要としない限り、あなたは本当にUI-GMAP-ウィンドウを使用しないでください。単一のui-gmap-windowを使用して、アクティブなマーカーに結合します。

+0

凄い、説明のためにありがとう。 – ecbrodie

+0

' 'を使用している場合は、ウィンドウをアクティブマーカーにどのように結び付けますか? –

+0

@Derek朕會功夫はマーカーにハンドラーを添付し、マーカーの変更に基づいてウィンドウがバインドされているオブジェクトを変更します。 – Myles

関連する問題