Özel görünüm için AngularJs dinamik yönergelerini kullanma

Question

Angular 1.2.29 ile farklı yönergeleri kullanarak özel bir görünümü doldurmak için sunucu tarafı tarafından oluşturulan JSON kullanıyorum. Performansı ve iyi uygulamaları dikkate almanın doğru yolu ile ilgili bir kaç sorum var. direktifin

• 5 farklı tipte JSON aynı yaklaşık 90% kalacak yaklaşık 30 öğeler
• için dahil olacak ve kötü biraz kullanıcı sekme anahtarı arasındaki tüm DOM öğelerini yeniden zorunda kalmak var.
• Ben saatler oluşturmaktan kaçınmak istiyor ama ben cloneAttachFn

düşünmelisiniz aynı zaman direktif çift yeniden gidiyorum beri 1.2.x kullanıyorum beri ben angular-once

kullanarak düşünmelisiniz function processItems(items) { angular.forEach(items, function(item) { switch(item.type) { case 'directive1': var newDirective = angular.element('<directive-one></directive-one>'); newDirective.attr('value', item.value); var compiledHtml = $compile(newDirective)(scope); element.append(compiledHtml); break; case 'directive2': var newDirective = angular.element('<directive-two></directive-two>'); newDirective.attr('value', item.value); var compiledHtml = $compile(newDirective)(scope); element.append(compiledHtml); break; } }) }

Size mevcut yaklaşımımı göstermek için bir Plunker oluşturdum. Yorumlar ve cevaplar çok açıktır! https://plnkr.co/edit/Za4ANluUkXYP5RCcnuAb?p=preview

Answer 1

Dinamik filtre tipi işlevsellik oluştururken birçok kez bu sorunu yaşadım. Kodunuz işe yarıyor, ancak üzerinde çalıştığı ve çok okunabilir olmadığını iddia ediyorum. GenericItems yönergesi gerekli değildir. İşlevleri görünüme taşımayı ve hareket ettirmeyi ve tür değiştikçe neler olduğunu netleştirmeyi denerdim. Kontrol

<div ng-controller="appCtrl as app"> 
    <p>{{app.name}}</p> 
    <button ng-click="app.add1()">Directive 1</button> 
    <button ng-click="app.add2()">Directive 2</button> 
    <button ng-click="app.remove()">Remove</button> 
    <div ng-repeat="item in app.items"> 
     <directive-one value="item.value" ng-if="item.type==='directive1'"></directive-one> 
     <directive-two value="item.value" ng-if="item.type==='directive2'"></directive-two> 
    </div> 
</div> 

Here is my solution as a Plunker

app.controller('appCtrl', function() { 

    var vm = this; 
    vm.items = []; 

    vm.name = 'Dynamic directive test'; 
    vm.add1 = function() { 
    vm.items.push({type: 'directive1', value: Math.random()}) 
    }; 

    vm.add2 = function() { 
    vm.items.push({type: 'directive2', value: Math.random()}) 
    }; 

    vm.remove = function() { 
    vm.items.pop(); 
    }; 
}); 

app.directive('directiveOne', function() { 
    return { 
    scope: { 
     value: '=' 
    }, 
    restrict: 'E', 
    template: '<p>d1: {{value}}</p>' 
    } 
}); 

app.directive('directiveTwo', function() { 
    return { 
    scope: { 
     value: '=' 
    }, 
    restrict: 'E', 
    template: '<p>d2: {{value}}</p>' 
    } 
}); 

app.js