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>

那么我该怎样做才能使指令呈现为标记而不是纯文本？

我看到了几个与此类似的问题，例如question 1，question 2，但它们都在标准HTML标记中添加动态指令。我需要的是一个动态标签。

更新：

在关注@cnexans后，我得到了部分工作。绘制了窗口小部件，但未评估target属性，这导致空白窗口小部件。这是问题的关键人物：https://plnkr.co/edit/BGN6C4LAHguWthU4fGy0?p=preview

Answer 1

你可以在ng-for中使用ng-if来切换名称＆＃34;指令＆＃34;在每次迭代中显示一个或另一个指令。

<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对象传递给该指令，并且您正在传递一个字符串。这是一个从plunkr分配的工作示例

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

Demo

对自定义指令标记的ngRepeat

2 个答案: