Angular 1.5：コンポーネントを動的に読み込みます。

Question

AngularJS 1.5とそのコンポーネントを使用して、ある種の一般的なgridviewを作成しようとしています。私は今起こって持っているものの（擬似コード）バージョン：

// inside <my-grid-component data="data" metadata="metadata"> 
<div ng-repeat="item in $ctrl.data"> 
    <my-row-component item="item" metadata="$ctrl.metadata"></my-row-component> 
</div 

// inside <my-row-component item="item" metadata="metadata"> 
<div ng-repeat="column in $ctrl.metadata.columns"> 
    <my-cell-component value="$ctrl.item[column]"></my-cell-component> 
</div> 

今<my-cell-component>値は、テキストやイメージか何かであるかのように、明白な例を扱ういくつかの基本的なng-switch文を持っていますが、以来でしたこれは多くの人々や多くのプロジェクトで使用されますが、誰かがセル内でファンシーや非常に特定のことをしたいと思う可能性があります。それらは<my-cell-component>より多くng-switchとちょうど償いますが、それらは保守性を傷つける基本フレームワークコードを乱しています。

私は、開発者がメタデータ内の特定のフィールドに独自のカスタムテンプレートをオプションで提供できるようにしたいと考えています。 metadata.columns[3].customCellComponentName = 'some-custom-template'; その後<my-row-component>は次のようになります。

<div ng-repeat="column in $ctrl.metadata.columns"> 
    <div ng-if="!column.isCustomCellComponent"> 
     <my-cell-component value="$ctrl.item[column]"></my-cell-component> 
    </div> 
    <div ng-if="column.isCustomCellComponent"> 
??? --> <column.customCellComponentName value="$ctrl.item[column]"></column.customCellComponentName> 
    </div> 
</div> 

プロジェクトは自動的に、$ templateCacheですべてのテンプレートを置きますので、テンプレートを解決することは問題になることはありませんが、それ以外の、「とマークされた行を?? ？ "明らかに動作しません。私は何を達成したいのかを実証しますが、実際にこのようなことをする方法はわかりません。私は転覆、ng-includeと他のソリューションを検討したが、どれもテンプレートを動的にロードし、いくつかのデータをモデルバインドするオプションを提供していないようだ。

すべてのアイデアは大歓迎です。できるだけ複雑すぎる指示から遠く離れていたいと思います。彼らはあなたに多くのことをさせることができますが、私の経験ではデバッグと保守性の悪夢です。

ありがとうございました。

Answer 1

<my-cell-component>の指示文を作成すると、templateUrlを受け入れるか、templateUrlと判断して使用することができます。私は後者のためにあなたに例を挙げてみましょう、

angular.module('myApp') 
    .directive('myCellComponent', ['CELL_TYPE', function (CELL_TYPE) { 
     return { 
      restrict: 'E', 
      scope:{ 
       cellType: '=' 
      }, 
      template: '<div ng-include="templateUrl"></div>', 
      link: function (scope) { 
       function setTemplate(cellType) { 
        scope.templateUrl = CELL_TYPE[cellType.value].templateUrl; 
        // or figure out some other way to determine templateUrl 
       } 
       scope.$watch(function() { 
        return scope.cellType; 
       }, function (newVal) { 
        if(newVal) { 
         setTemplate(scope.cellType); 
        } 
       }); 
      } 
     }; 
}]); 

だから、我々はいくつかの定数に基づいて決定templateUrlを使用していますng-includeを持つディレクティブのテンプレートを持っている、CELL_TYPEは言います。

属性に基づいてテンプレートを動的に読み込むディレクティブがあります。

templateUrlを動的に変更することがユースケースに該当しない場合は、明らかに、$watchを取り除くことができます。