Question

我正在研究Angular 1应用程序，我需要根据 ng-repeat 循环中的值调用不同的指令。到目前为止，我正在使用 ng-if ，如果它符合条件，则呈现该指令，但我想的是如果我在一段时间后得到100个指令，那么我将使用100 ng-ifs和我认为必须有更好的解决方案。

这是我的一些代码

调用指令的模板

<render-directive ng-if="data.length !== 0" data="data"></render-directive>

renderDirective模板

<div ng-repeat="element in data">
  <div ng-if="element.item === 'motor'">
    <render-motor motor-id="element.id" name="element.item"
              checked="element.params.switch"></render-motor>
  </div>

  <div ng-if="element.item === 'adc'">
    <render-adc adc-id="element.id" name="element.item"></render-adc>
  </div>
</div>

为了简单起见，我只显示了两个指令，但实际上我已经调用了10个以上的指令，将来它可以达到100个。

那么有没有人可以告诉我一个更好的方法来做到这一点，我不会在每个指令中使用ng-if？

如果我没有清除有问题的东西，请告诉我。

UPDTAE

为了清除我正在寻找的东西，我有一个阵列有＆＃39; item＆＃39;根据那个属性，我想称之为指令。所以对于例如，

for item =＆＃34; motor＆＃34;，我想调用motorDirective
for item =＆＃34; switch＆＃34;，我想调用switchDirective
for item =＆＃34; led＆＃34;，我想打电话给ledDirective

等等。

Answer 1

您需要在renderDirective中使用$ compile。

在编译步骤中，我们需要编译动态需要的指令。

Answer 2

我必须更新我的答案，因为将范围传递给ng-bind-html很棘手。

此外，具有多态指令的解决方案更好，因为它还可以保存表驱动解决方案的声明部分。

有趣部分是变形指令的最终解决方案：

var app = angular.module('app',[]);

app.controller('elementsCtrl',['$scope', function($scope){
  
  $scope.elements = [
    {type: 'motor'},
    {type: 'adb'},
    {type: 'led'},
    {type: 'motor'}
  ];
}]);

app.directive('polymorph', ['$compile', function($compile){
  return{
    restrict: 'E',
    scope: {
      type: '@',
      item: '='
    },
    link: function(scope, element, attr){
      var result = $compile('<div '+ scope.item.type +'></div>')(scope);
      element.append(result);
    }
  }
}]);

app.directive('motor', function(){
  return{
    restrict: 'A',
    replace: true,
    template: '<div style="color:blue;">{{item.type}}</div>'
  }
});


app.directive('led', function(){
  return{
    restrict: 'A',
    replace: true,
    template: '<span style="color:green;">{{item.type}}</span>'
  }
});

app.directive('adb', function(){
  return{
    restrict: 'A',
    replace: true,
    template: '<p style="color:red;">{{item.type}}</p>'
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="elementsCtrl">
  <div ng-repeat="element in elements">
    <polymorph type="{{element.type}}" item="element"></polymorph>
  </div>
</div>

动态调用Angularjs指令

2 个答案: