動態調用Angularjs指令

我正在使用Angular 1應用程序，我需要根據ng-repeat循環中的值調用不同的指令。我正在使用ng-if到目前爲止，如果它符合條件就會呈現該指令，但我所想的是，如果一段時間後有100條指令，那麼我將使用100 ng-ifs，並且我認爲必須爲此做一些更好的解決方案。動態調用Angularjs指令

下面是一些我的代碼

模板，該模板調用指令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>

爲了簡單

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

模板，我只顯示了兩個指令，但實際上我已經調用了超過10個指令和它將來可能會達到100。

那麼有沒有人可以告訴我一個更好的方法來做到這一點，我不需要使用ng-if來指導每個指令？

如果我沒有清除某些問題，請讓我知道。

UPDTAE

對於清算什麼，我正好在尋找，我有其中有「項目」屬性格式，並根據該屬性我想打電話給一個指令的數組。因此，對於例如，

的項目=「馬達」，我想打電話給motorDirective

的項目=「開關」，我想打電話給switchDirective

的項目=「領導」，我想call ledDirective

等等。

來源

2017-01-02 myke_11j

什麼你到底需要什麼？使用不同的模板做不同的結構或數據循環不同的數據？ –

請參閱更新 –

使用[ng-switch指令]（https://docs.angularjs.org/api/ng/directive/ngSwitch）進行研究。它比使用多個'ng-if'指令的開銷少。 – georgeawg

我不得不更新我的答案，因爲它很難將範圍傳遞給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>

來源

2017-01-02 13:27:21 Piou

這可能對我來說...我會試試這個。謝謝 –

是的，我需要這樣的東西。 $ compile是我的解決方案。感謝Piou –

您需要在renderDirective中使用$ compile。

在編譯步驟中，我們需要編譯動態所需的指令。

來源

2017-01-02 13:03:30

你能發表一段關於如何在指令中使用編譯塊來調用不同指令的代碼片段嗎？謝謝 –

動態調用Angularjs指令

回答

相關問題