使用 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'
    }
});

每个指令都有不同的视图模型。现在我使用 ajax 到 return 一个 json 结构，如下所示：

  "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-repeat 生成以下结果视图：

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

我该怎么办？

Answer 1

循环你的 JSON 数据以创建你需要的 HTML 并利用 $compile 服务编译生成的 HTML 如下所示

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>'
    }
});

创建一个新指令，它将根据您的 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 加载适当的指令。假设你的控制器中有 $scope.device_list，你会使用类似的东西：

<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

这是用于解决我的问题的代码（基于 Lex 的回答）。

<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>

使用 ng-repeat 重复不同的指令？

Using ng-repeat to repeat different directives?

angularjs

ng-repeat