ng-repeatを使用して異なるディレクティブを繰り返しますか？

Question

私はこのような異なるディレクティブを定義します。

var app = angular.module('myApp',["ngTouch"]); 

app.directive('controlLed',function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: true, 
     templateUrl: 'controlLed.html' 
    } 
}); 

app.directive('controlPlug',function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: true, 
     templateUrl: 'controlPlug.html' 
    } 
}); 

app.directive('controlTemp',function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: true, 
     templateUrl: 'controlTemp.html' 
    } 
}); 

app.directive('controlDoor',function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: true, 
     templateUrl: 'controlDoor.html' 
    } 
}); 

各ディレクティブは異なるビューモデルを持っています。今、私はこのようなJSON構造を返すために、AJAXを使用します。

"device_list":{ 
    "d0": { 
     name:led1, 
     model:controlLed 
    }, 
    "d1": { 
     name:led2, 
     model:controlLed 
    }, 
    "d2": { 
     name:plug1, 
     model:controlPlug 
    }, 
    "d3": { 
     name:Temp1, 
     model:controlTemp 
    }, 
    "d4": { 
     name:Door, 
     model:controlDoor 
    } 
} 

私は結果の次のビューを生成するために、NG・リピートを使用したい：

<div class="content"> 
    <control-led></control-led> 
    <control-led></control-led> 
    <control-plug></control-plug> 
    <control-temp></control-temp> 
    <control-door></control-door> 
</div> 

私は何をすべき？あなたのディレクティブ

var app = angular.module('myApp',[]); 

app.controller('mCTRL',function($scope){ 
    $scope.myJSONData=[{ 
     name:'led2', 
     model:'controlplug' 
    },{ 
     name:'led1', 
     model:'controlled' 
    }] 

}) 

以下

app.directive('controlled',function() { 
    return { 
     restrict: 'E', 
     scope: true, 
     replace:true, 
     template: '<div>controlLed.html</div>' 
    } 
}); 

app.directive('controlplug',function() { 
    return { 
     restrict: 'E', 
     scope: true, 
     replace:true, 
     template: '<div>controlPlug.html</div>' 
    } 
}); 

のように生成されるHTMLはどの意志新しいディレクティブを作成してコンパイルするサービスをコンパイルして、必要なHTMLを作成し、$を利用するあなたJSONデータに対する

Answer 1

ループJSONデータに基づいて動的テンプレートを作成する

app.directive('main',function($compile){ 
    return{ 
    restrict: 'E', 
     replace: true, 
     link(scope,elem,attrs) 
     { 
     debugger; 
     var html=''; 

     for(var i=0;i<scope.myJSONData.length;i++) 
     { 
      debugger; 
      var model=scope.myJSONData[i].model; 
      html+=$compile("<div><"+model+"><"+model+"/><div/>")(scope).html() 
     } 
     elem.replaceWith(html); 

     } 

    } 

}) 

注：このようにすれば、コードを汎用的にすることができます。将来、いくつかのディレクティブを追加する必要がある場合、JSONに追加するだけで正しい指示を選んでレンダリングしますあなたの意見を毎回変えてください。

Answer 2

ng-repeatの中にng-switchを使用して、適切な指令をロードしてください。これは、（レックスでの回答に基づいて）私の問題を解決するために使用されるコードである

<div class="content" ng-repeat="device in device_list"> 
    <div ng-switch="device.model"> 
     <div ng-switch-when="controlLed"> 
      <control-led></control-led> 
     </div> 
     <div ng-switch-when="controlPlug"> 
      <control-plug></control-plug> 
     </div> 
     <div ng-switch-when="controlTemp"> 
      <control-temp></control-temp> 
     </div> 
     <div ng-switch-when="controlDoor"> 
      <control-door></control-door> 
     </div> 
    </div> 
</div> 

Answer 3

：あなたのコントローラで$scope.device_listを持っていると仮定すると、あなたのようなものを使用します。

<div class="content" ng-controller="device-panel"> 
    <div ng-repeat="device in devicelist" ng-switch on="device.model"> 
     <div ng-switch-when="controlLed"> 
      <control-led></control-led> 
     </div> 
     <div ng-switch-when="controlPlug"> 
      <control-plug></control-plug> 
     </div> 
     <div ng-switch-when="controlTemp"> 
      <control-temp></control-temp> 
     </div> 
     <div ng-switch-when="controlDoor"> 
      <control-door></control-door> 
     </div> 
    </div> 
</div>