自定义指令标记上的ngRepeat

Question

我在仪表板上有一个自定义指令列表，这些指令是不同的小部件。这些指令的定义如下：

angular.module('core').directive('graphCardWidget', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            target: '=target'
        },
        templateUrl: 'modules/core/widgets/graph-card.client.widget.html'
    };
});

angular.module('core').directive('pieChartWidget', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            target: '=target'
        },
        templateUrl: 'modules/core/widgets/pie-chart.client.widget.html'
    };
});

在我的控制器中，我有一个要显示的小部件列表。清单如下：

$scope.dashboardWidgets = [
        {
            directive : 'graph-card-widget',
            target : 'widgets.dashboards.activeDevicesCard'
        },
        {
            directive : 'graph-card-widget',
            target : 'widgets.dashboards.activeSessionsCard'
        },
        {
            directive : 'pie-chart-widget',
            target : 'widgets.dashboards.devices'
        },
        {
            directive : 'pie-chart-widget',
            target : 'widgets.dashboards.sessions'
        }
    ];

现在，在我看来，我使用ng-repeat来迭代这个数组并显示项。以下是我的观点代码：

<div layout="row" layout-wrap layout-align="center" layout-xs="column" ng-drop="true">
    <div ng-repeat='widget in dashboardWidgets'>
        <{{widget.directive}} ng-drag="true" flex='45' target='{{widget.target}}'>
        </{{widget.directive}}>
        <span flex='5'></span>
    </div>
</div>

但浏览器将其呈现为文本。下面是我在我的DOM中得到的信息：

<div layout="row" layout-wrap="" layout-align="center" layout-xs="column" ng-drop="true" class="layout-wrap layout-xs-column layout-align-center-stretch layout-row">
    <div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope">
        “<graph-card-widget ng-drag="true" flex='45' target='widgets.dashboards.activeDevicesCard’>”
        <span flex="5" class="flex-5"></span>
    </div>
    <div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope">
        “<graph-card-widget ng-drag="true" flex='45' target='widgets.dashboards.activeSessionsCard’>”
        <span flex="5" class="flex-5"></span>
    </div>
    <div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope">
        “<pie-chart-widget ng-drag="true" flex='45' target='widgets.dashboards.devices’>”
        <span flex="5" class="flex-5"></span>
    </div>
    <div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope">
        “<pie-chart-widget ng-drag="true" flex='45' target='widgets.dashboards.sessions’>”
        <span flex="5" class="flex-5"></span>
    </div>
</div>

那么，我能做什么使指令呈现为标签而不是纯文本呢？

我看到了一些类似于这些问题的问题，比如，问题1、问题2，但是它们都在标准的HTML标记中添加动态指令。我需要的是动态标签。

更新：

在跟踪@cnexans的回答之后，我让它部分地工作了。绘制小部件，但不计算target属性，从而导致一个空白小部件。下面是这个问题的柱塞：https://plnkr.co/edit/BGN6C4LAHguWthU4fGy0?p=preview

Answer 1

您可以使用ng(如果在ng内)，以便在每次迭代中切换名称“指令”，以显示一个或另一个指令。

<div ng-repeat="data in dashboardWidgets">
    <div ng-if="data.directive == 'graph-card-widget'">
        <graph-card-widget ng-drag="true" flex='45' target=data.target>
        </graph-card-widget>
        <span flex='5'></span>
    </div>
    <div ng-if="data.directive == 'pie-chart-widget'">
        <pie-chart-widget ng-drag="true" flex='45' target=data.target>
        </pie-chart-widget>
        <span flex='5'></span>
    </div>
</div>

您也可以创建一个容器指令来处理这个逻辑，所以如果需要的话，您可以将这个功能共享给其他页面。

<widgets-container widgets-list=data></widgets-container>

工作示例：https://codepen.io/anon/pen/jBzEpe?editors=1010#0

编辑：

检查给出的示例时，需要将Widget对象传递给指令，并传递一个字符串。下面是一个从所给的柱塞分叉的工作示例

https://plnkr.co/edit/3Oxxmp?p=preview

它有一个函数namespaceToObject，它将字符串从$scope转换为所需的对象。

Answer 2

不知道这是否符合你的要求。但我对你的数组做了些修改。

我使用ng-bind-html完成了这一工作，当您绑定自定义元素(如指令)时，您需要再次编译它。为此，我创建(实际上借用)了这个指令。

.directive('compileTemplate', function($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.ngBindHtml);
            function getStringValue() { return (parsed(scope) || '').toString(); }

            //Recompile if the template changes
            scope.$watch(getStringValue, function() {
                $compile(element, null, -9999)(scope);  //The -9999 makes it skip directives so that we do not recompile ourselves
            });
        }         
    }
});

我像这样改变了ng-repeat

 <div ng-repeat='widget in dashboardWidgets' compile-template ng-bind-html="trust(widget.directive)">

        <span flex='5'></span>
 </div>

信任函数将返回可信html。

 $scope.trust = function(someHTML){ 
        return $sce.trustAsHtml(someHTML); 
 }

按如下方式修改数组

$scope.dashboardWidgets = [
    {
        directive : '<graph-card-widget ng-drag="true" flex="45" target="widget.target"></ graph-card-widget>',
        target : 'widgets.dashboards.activeDevicesCard'
    },
    {
        directive : '<graph-card-widget ng-drag="true" flex="45" target="widget.target"></ graph-card-widget>',
        target : 'widgets.dashboards.activeSessionsCard'
    },
    {
        directive : '<pie-chart-widget ng-drag="true" flex="45" target="widget.target"></ pie-chart-widget>',
        target : 'widgets.dashboards.devices'
    },
    {
        directive : '<pie-chart-widget ng-drag="true" flex="45" target="widget.target"></ pie-chart-widget>',
        target : 'widgets.dashboards.sessions'
    }
];

演示