6

私は、Angular が配列を監視する方法に取り組んでいます。次のマークアップがあります。

<map name="theMap" center="{{mapInfo.center.toUrlValue()}}" zoom="{{mapInfo.zoom}}" on-dragend="dragEnd()" on-zoom_changed="zoomChanged()">
    <marker ng-repeat="pin in pins() track by pin.iconKey()" position="{{pin.latitude}}, {{pin.longitude}}" title="{{pin.streetAddress}}" pinindex="{{$index}}" on-click="click()" 
            icon="{{pin.icon()}}"></marker>
</map>

pins() によって返される個々のピンには、多数のプロパティ、サブプロパティなどがあります。これらのサブプロパティの 1 つは、マーカーの色を制御します。そのサブプロパティが変更されたら、UI を更新する必要があります。

ng-repeat はコレクションへの単純な変更に基づいて $watch に表示されるため、それを達成する方法は明らかではありません。サブプロパティの値に応じて異なる値を返すため、私の追跡関数 iconKey() がそれを行うと考えました。しかし、それはうまくいきませんでした。

もう 1 つ: サブプロパティは、ディレクティブの下で実行される $interval からのコールバックで変更されます。これについて言及したのは、以前の投稿で、誰かがコンテキスト/スコープの問題があるかもしれないと考えていたからです。

ただし、UI のコントローラー ($interval コールバックの "success" 句内でイベントが発生する場所) 内のイベント リスナーを変更しても、まだ機能しません。

そういうわけで、問題は iconKey(); の変更に気付かないだけの角度だと思います。$watches ng-repeat が配列の長さであるように動作しています。サブプロパティが変更されても変更されません。

アップデート

私が直面している問題を示すためにプランカーを作成しました。http://plnkr.co/edit/50idft4qaxqw1CduYkOdで見つけることができます。

これは私が構築しているアプリの縮小版ですが、必須要素 (たとえば、マップ ピンに関する情報を保持するデータ コンテキスト サービスと、ピン配列要素の 1 つのサブプロパティを切り替える $interval サービス) が含まれています。 .

メニュー バーの [開始] をクリックして、更新サイクルを開始します (マップを少し下にドラッグして、両方のピンを完全に表示することをお勧めします)。各ピンの色を交互に 5 回、2 秒ごとに 1 回切り替える必要があります。これは、コントローラーで定義されたリスナーの pin オブジェクトの isDirty プロパティの値を切り替えることによって行われます。イベントは $interval サービスによって発生します。

テスト サイクル中に 22 行目でブレークすると、ピンのアイコンが返されます。したがって、角度内の何かが情報を求めています...しかし、ピンの色は変わりません。

私の理論とは何の関係もない骨の折れる間違いを誰かがすぐに指摘してくれることを楽しみにしています:)。私が身に着けている目隠しについては、あらかじめお詫び申し上げます。

更新 2

応答のコード スニペットを確認した後、plnkr を単純化し、サブプロパティが変更されたときに angular が実際に UI を更新することを示しました。したがって、これは ng-map の制限またはバグのようです。

4

1 に答える 1