angularjs - Angular 1.5 : dynamically load a component

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 es，但随后它们会弄乱基本框架代码，这会损害可维护性。

因此，理想情况下，我想做一些开发人员可以选择为元数据中的特定字段提供自己的自定义模板的东西，例如 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和其他解决方案，但似乎都没有提供动态加载模板和模型绑定(bind)一些数据的选项。

非常欢迎任何和所有想法。我想尽可能远离过于复杂的指令。虽然它们允许您做很多事情，但根据我的经验，它们也是调试和可维护性的噩梦。

谢谢。

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);
                  }
              });
          }
      };
}]);

因此，我们得到了具有 ng-include 的指令模板。使用 templateUrl根据一些常数确定，例如 CELL_TYPE .

现在您已经有了一个指令，可以根据您的属性动态加载其模板!

你可以(显然)摆脱 $watch如果动态更改 templateUrl不适用于您的用例。