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返回一个像这样的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-switch内使用ng-repeat加载相应的指令。假设你的控制器中有$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重复不同的指令？

3 个答案: