उदाहरण पर ngrepeat

Question

देखो अंदर गतिशील निर्देश AngularJS:

$scope.fields = [{ 
    name: 'Email', 
    dir : "abc" 
}, { 
    name: 'List', 
    dir : "ddd" 
}]; 

app.directive('abc', function() {}); 
app.directive('ddd', function() {}); 

<table class="table table-hover"> 
     <tr ng-repeat="p in fields"> 
      <input {{p.dir}} ngmodel="p" /> 
     </tr> 
    </table> 

मैं कोड कैसे लिख सकते हैं, कि p.dir गतिशील रूप से एक directive में बदल जाएगा?

मेरे उदाहरण: hhttp: एक निर्देश में भी

<input {{p.dir}} ngmodel="p" /> 

: //jsbin.com/vejib/1/edit

Answer 1

इस निर्देश का प्रयास करें: कैसे इस निर्देश कार्यों पर

<table class="table table-hover"> 
    <tr ng-repeat="p in people"> 
     <td dynamic-directive="p.dir" blah="p"></td> 
    </tr> 
</table> 

DEMO

अधिक जानकारी के लिए और कारण है कि हम टर्मिनल जोड़ने के लिए:

app.directive('dynamicDirective',function($compile){ 
    return { 
     restrict: 'A', 
     replace: false, 
     terminal: true, 
     priority: 1000, 
     link:function(scope,element,attrs){ 

     element.attr(scope.$eval(attrs.dynamicDirective),"");//add dynamic directive 

     element.removeAttr("dynamic-directive"); //remove the attribute to avoid indefinite loop 
     element.removeAttr("data-dynamic-directive"); 

     $compile(element)(scope); 
     } 
    }; 
}); 

इसका इस्तेमाल सही और प्राथमिकता: 1000। Add directives from directive in AngularJS

Answer 2

आप इस डाल सकता है। आप जावास्क्रिप्ट में इस HTML स्ट्रिंग का निर्माण कर सकते हैं और इसे DOM से जोड़ सकते हैं। और आपको $ संकलन सेवा का उपयोग करके परिणामी तत्व को संकलित करने की भी आवश्यकता होगी, ताकि गतिशील निर्देश संकलित किए जाएंगे।

कोई डमी नमूना कोड (नहीं परीक्षण किया है, लेकिन कुछ इस तरह देखना चाहिए):

app.directive('dynamicInput', function($compile){ 
return { 
    link: function(scope, element){ 
     var htmlString = '<input ' + scope.field.dir + ' ng-model="p"/>'; 
     element.replaceWith(htmlString); 
     $compile(angular.element(element))(scope); 
    } 
} 

});

अधिक जानकारी here।