AngularJS

İçinde bileşenleri içeren bir nesne var. Bu nesnelerin her biri bir dize değeri olan bir "bileşen" özelliğine sahiptir. Şimdi listeden döngü yapmak ve başvurulan bileşenlerin her birini oluşturmak istiyorum. İlmekli nesnelerin diğer özelliklerinin, bileşenler için parametreler sağlaması beklenir (aşağıdaki örnekte yer almaz).AngularJS

Benim çözümüm şimdiye kadar çalışır, ancak bir switch-case izin unsurları belirten gerektirir ve istenmeyen sarıcı elemanlarını oluşturur

angular.module('switchExample', []) 
 
     .controller('ExampleController', ['$scope', 
 
     function($scope) { 
 
      $scope.items = [{ 
 
      component: "alpha" 
 
      }, { 
 
      component: "beta" 
 
      }, { 
 
      component: "alpha" 
 
      }]; 
 
     } 
 
     ]) 
 
     .component('alpha', { 
 
     template: "this is component alpha", 
 
     }) 
 
     .component('beta', { 
 
     template: "this is component beta" 
 
     })

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="switchExample"> 
 
    <div ng-controller="ExampleController"> 
 
    <div ng-repeat="s in items" ng-switch="s.component"> 
 
     <alpha ng-switch-when="alpha"></alpha> 
 
     <beta ng-switch-when="beta"></beta> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

prosedür bileşenleri içerecek şekilde bir yolu var mı dize karşılaştırma ve açık çağrının gidiş-dönüşü olmadan? Böyle

şey, belki ?:

<div ng-repeat="s in items"> 
    <component ng-component="s.component"></component> 
</div>

veya daha iyi:

<div ng-repeat="s in items" ng-component="s.component"></div>

veya alternatif:

<div ng-component="s.component for s in items"></div>

kaynak

2016-07-26 Hubert Grzeskowiak

soru nedir? – svarog

Net olmadığım için üzgünüz. Sonunda soru eklendi. –

Sorunsuz bir şekilde yapacak olan 'ng-component' diye bir şey yoktur. Bu, içeriğini yeniden derleyen bir direktif olarak sonuçlanacaktır (performans cezalarından bahsetmeyeceğim). 'Dinamik yönerge' gibi bir şey arayarak yaklaşıma aşina olabilirsiniz. – estus

Tam belge ve GitHub: https://github.com/hubertgrzeskowiak/angular-component-directive adresinden indirebilirsiniz.Aşağıda benim cevap dayanarak

, ben oldukça temiz ve daha çok yönlü bir şekilde bu yeniden hayata geçirdik. Demo: http://plnkr.co/edit/uDxIUulQPx4C3s11b5cG?p=preview

Kullanımı (tam docs ön GitHub bakınız): "ad" ifadesi bir bileşen adı (string) için değerlendirmek gerekir

<component name="expr" args="expr" replace="expt"></component>

... "args" (opsiyonel) gerekir bir nesneye değerlendirir ve "değiştir" (isteğe bağlı) bir boolean'a değerlendirmelidir. args, yeni bileşen için özniteliklere açıldığından, bu nesnedeki her değer bir ifadedir. "Değiştir" doğruysa, bileşen kendini değiştirir.

kaynak

2016-08-07 18:25:40

diye bir şey yoktur Ng- Bunu sorunsuzca yapan bileşen. Bu, içeriğini yeniden derleyen bir direktif olarak sonuçlanacaktır (performans cezalarından bahsetmeyeceğim). Sen 'dinamik direktifi'

Estus

sayesinde Estus gibi bir şey arayarak yaklaşımla aşina olabilir!

Tam olarak bunu yaptım! Aşağıda görebileceğiniz component

özel direktifi geçti name parametreye dayalı bileşenleri oluşturur ve isteğe bağlı args sürer.

Örnek giriş:

<component name="'alpha'"></component>

Çıkış Args ile

<component name="'alpha'"> 
    <alpha> 
     whatever alpha component decides to render in its template 
    </alpha> 
</component>

<component name="'alpha'" args="{foo:'bar', num:42, o:{a:1}}"></component>

Çıkış:

<component name="'alpha'" args="{foo:'bar', num:42, o:{a:1}}"> 
    <alpha foo="'bar'" num="42" o="{a:1}"> 
     whatever alpha component decides to render in its template with the given args 
    </alpha> 
</component>

angular.module('switchExample', []) 
 

 
.directive('component', ['$compile', 
 
    function($compile) { 
 
    return { 
 
     restrict: 'AEM', 
 
     scope: { 
 
     name: '<', 
 
     args: '<' 
 
     }, 
 
     controller: function($scope, $element) { 
 
     var args = $scope.args; 
 
     //console.log(args) 
 
     var argsStr = "" 
 
     if (typeof args !== 'undefined' && args.constructor === Object) { 
 
      for (arg in args) { 
 
      argsStr += ' ' + arg + '="args.' + arg + '"'; 
 
      } 
 
     } 
 
     var elem = "<" + $scope.name + argsStr + "></" + $scope.name + ">"; 
 
     //console.log(elem) 
 
     var component = $compile(elem)($scope)[0]; 
 
     $element.append(component); 
 
     } 
 
    } 
 
    } 
 
]) 
 

 
.controller('ExampleController', ['$scope', 
 
    function($scope) { 
 
     $scope.items = [{ 
 
     component: "alpha", 
 
     args: { 
 
      foo: "first elem" 
 
     } 
 
     }, { 
 
     component: "alpha", 
 
     args: { 
 
      foo: "the last one has no foo" 
 
     } 
 
     }, { 
 
     component: "alpha", 
 
     args: {} 
 
     }]; 
 
    } 
 
    ]) 
 
    .component('alpha', { 
 
    bindings: { 
 
     foo: '<?' 
 
    }, 
 
    template: "this is component alpha. foo arg: {{ $ctrl.foo }}" 
 
    }) 
 
    .component('beta', { 
 
    template: "this is component beta" 
 
    })

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="switchExample"> 
 
    <h2>Procedural component</h2> 
 
    <component name="'alpha'"></component> 
 
    <br> 
 
    <component name="'alpha'" args="{foo:'this was passed!', num:123, obj:{}}"></component> 
 
    <br> 
 
    <div component name="'alpha'" args="{foo:'as was this'}"></div> 
 
    <hr> 
 
    <h2>Looping</h2> 
 
    <div ng-controller="ExampleController"> 
 
    <div ng-repeat="s in items" ng-switch="s.component"> 
 
     <component name="s.component" args="s.args"></component> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

benim bileşenleri sarma ekstra HTML öğelerinin kurtulmak olamazdı, ama en azından ben açıkça izin verdiği döngü ve ne değil söylemek gerekmez.

kaynak

2016-07-26 23:35:47

Bunun büyük bir dezavantajı olduğunu öğrendim: nesnelerin kopyalarını geçirir, böylece Angular'ın izleme mekanizmaları işe yaramaz: -/ –

Nevermind, Düzeltilmiş bir yanıtla birlikte yanıt. –

cevap

İlgili konular