javascript - AngularJS:プログラムでディレクティブをビューに追加しようとしています

Question

これが私のプランクです: http://plnkr.co/edit/BGD0n6gmDM3kv5akIn4l?p=info

ある種のビューファクトリーを作ろうとしています。理想的には、コントローラーは、ビューがページをレンダリングするために使用するスコープに構成オブジェクトを配置します。ナビゲーションとコンテンツの構築に使用されます。このオブジェクトからディレクティブ/部分ビュー参照を動的に渡そうとしているときに行き詰まりました。

これは、私のコントローラーの構成から分離されたオブジェクトです。

$scope.partials = [
    {
        name: 'Well',
        method: 'showWell()',
        isVisible: false,
        template: '<container-well></container-well>'
    }
 ];

この質問の焦点は、テンプレート プロパティです。ここでは、部分ビューとして機能するディレクティブを作成しました。

以下は、私のディレクティブの 1 つの例です。

myApp.directive('containerWell', function() {
    return {
        restrict: 'E',
        replace: false,
        templateUrl: 'containers/well.html',
        scope: {}
    }
});

そして、well.html テンプレート ファイルは次のとおりです。

<div>
    <h2 class="special">Well Types</h2>
    <div class="well well-cc">
        <p>Closed Well</p>
        <p>CSS: .well.well-cc</p>
    </div>

    <div class="well well-cc open">
        <p>Open Well</p>
        <p>CSS: .well.well-cc.open</p>
    </div>

    <h3 class="alt">Wells can have different highlights applied with css classes</h3>
    <div class="well well-cc highlight-warning">
        <p>CSS: .well.well-cc.highlight-warning</p>
    </div>
</div>

私が失敗している私の見解のコードは次のとおりです。

<div ng-repeat="partial in partials" ng-bind-html-unsafe="{{partial.template}}"></div>

生成されたマークアップは次のようになります。

<div class="ng-scope" ng-bind-html-unsafe="<container-well></container-well>" ng-repeat="partial in partials"></div>

基本的には、ディレクティブではなく属性に文字列タグを追加するだけです。

基本的に、ビューにディレクティブをプログラムで追加できるようにしたいと考えています。私がやろうとしていることさえ可能かどうかはわかりません。ディレクティブに相当する文字列を渡すことが正しい方法であるとは確信していません。私がばかげている場合は、いくつかの提案や厳しい修正をお願いします。厳しすぎるわけではありませんが、建設的なものかもしれません ;)

これが私のプランクです: http://plnkr.co/edit/BGD0n6gmDM3kv5akIn4l?p=info

ありがとう、

ヨルダン