私はオブジェクトの配列を持っています。これらの各オブジェクトには、文字列値を持つ「コンポーネント」プロパティがあります。今度は、リストをループして、参照されている各コンポーネントをレンダリングします。ループされたオブジェクトのその他のプロパティは、コンポーネントのパラメータを提供することになっています(以下の例には含まれていません)。AngularJSに手続き的にコンポーネントを含める
私のソリューションこれまでの作品が、スイッチケースで許可される要素を記述し、不要なラッパー要素を作成が必要です。
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>
は、手続きの構成要素を含んする方法はあります文字列比較と明示的な呼び出しの往復なしで?このような
何か、多分?:
<div ng-repeat="s in items">
<component ng-component="s.component"></component>
</div>
またはより良い:
<div ng-repeat="s in items" ng-component="s.component"></div>
または代わり:
<div ng-component="s.component for s in items"></div>
どういうところですか? – svarog
申し訳ありませんが明確ではありません。最後に質問が追加されました。 –
これをシームレスに行うための 'ng-component 'はありません。これは、その内容を再コンパイルする指令として終わることになります(パフォーマンスペナルティはもちろんです)。ダイナミックディレクティブのようなものを検索することで、このアプローチに慣れることができます。 – estus