2014-04-17 16 views
6

Look iç dinamik direktifini angularjs?örneğe ngrepeat

Benim örnek: hhttp: //jsbin.com/vejib/1/edit

+0

Gerçekten bunun için bir direktife ihtiyacınız var mı? dddd olarak değiştirebiliyor musunuz: {{p.name}} ddd: {{p.age}} '? –

+0

@RuslanIsmagilov Bu görselle ilgili değil. Eash yönergesi kendi iş mantığına sahiptir. Özel iş mantığıyla dinamik olarak formlar oluşturmak isterim. –

+0

Sanırım yalıtmak için direktif kapsamını belirlemeniz gereken benzer amblemlerim vardı. Dokümanları kontrol edin http://docs.angularjs.org/guide/directive –

cevap

10

bu yönergeyi deneyin: bu nasıl yönerge eserler hakkında ayrıntılı bilgi için

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

DEMO

ve neden terminali eklemek zorunda:

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

kullanın gerçek ve öncelik: 1000. Check out Add directives from directive in AngularJS

+2

Teşekkür ederiz. Açılışı böyle bir şeyin olduğu gibi düşündüm. görünüşe göre öyle değil. –

0

Bu bırakabilir:

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

de yönergede. Bu HTML dizesini JavaScript’te oluşturabilir ve DOM’e ekleyebilirsiniz. Ayrıca, sonuçta ortaya çıkan elemanı $ derleme hizmetini kullanarak derlemeniz gerekir, böylece dinamik direktifler derlenecektir.

Bazı kukla örnek kod (değil test edilmiş, ancak bu gibi görünmelidir):

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

});

Daha fazla bilgi here.

İlgili konular