1

データ視覚化のレンダリングを制御する3 つのモデル属性year、indicator、geographyがあります。

このモデルの変更内容に応じて、ビジュアライゼーションのレンダリングを制御できるようにしたいと考えています。

  //Pseudo code
  watch function ( year, indicator, geography ) {
     if(geography.previous == a && geography.current == b){
        renderA()
     }
     if(geography.previous == a && year == 1950){
        renderB()
     }
  }

上記の例が示すように、レンダリングを決定するために、以前の値を現在の値およびモデルの変更の任意の組み合わせと比較できるようにしたいと考えています。

これをAngularでどのように設定しますか?
（おそらくモデルのサービスを含め、複数の属性を監視しています...）

4

2 に答える 2

0

ここでng-includeが役立ちます。Aおよびのテンプレートを定義できますB。これらのテンプレートは、サーバー側またはクライアント側 (ng-template を使用) にすることができます。

クライアント側のテンプレートを使用する場合、次のようになります

<script type="text/ng-template" class="template" id="templateA">
<!-- HTML for A here -->
</script>

<script type="text/ng-template" class="template" id="templateB">
<!-- HTML for B here -->
</script>

HTML で ng-include を使用してテンプレートを動的に切り替えることはできません。HTMLは次のようになります

<div id="renderContainer" ng-include='templateName'></div>

コントローラーでウォッチ機能を定義できます

//Pseudo code
  watch function ( year, indicator, geography ) {
     if(geography.previous == a && geography.current == b){
        $scope.templateName='templateA';
     }
     if(geography.previous == a && year == 1950){
        $scope.templateName='templateB';
     }
  }

変数を変更するtemplateNameと、UI でレンダリングされたテンプレートが動的に変更されます

于 2013-07-29T07:58:21.377 に答える