动态包含角度指令

Dynamically include directive in angular

本文关键字：指令 包含角 动态      更新时间：2023-09-26

我有一种情况，我想动态地将指令/组件包含在角度模板中。我想要这个的原因是我正在编写一个仪表板，它应该很容易用新的小部件进行扩展。我真的很喜欢角度中的指令/组件思维，并且希望能够为每个小部件制定指令。然后我想添加每个带有 ng 重复或类似内容的小部件。这将使随着时间的推移添加新小部件变得非常容易。我的问题是，首先是这种想法是否合理，其次，如果有人知道是否有人写过这样的东西，我可以开始。

例

vm.widgets = [{
    component: 'widgetA'
},{
    component: 'widgetB'
}]
<div ng-repeat="widget in dashboard.widgets">
    <ng-include-component name="widget.component">
</div>

这样的事情对我有用：

您的观点：

    <div ng-repeat="row in components">
        <div class="row">
            <div ng-repeat="col in row">
                <div class="col-md-{{col.width}}" ng-include="col.url"/>
            </div>
        </div>
    </div>

您的控制器：

        $scope.components = {
            'Row1': [
                [{
                    url: '/views/widget1.html',
                    width: '4'
                }, {
                    url: '/views/widget2.html',
                    width: '8'
                }]
            ],
            'Row2': [
                [{
                    url: '/views/widget3.html',
                    width: '4'
                }, {
                    url: '/views/widget4.html',
                    width: '4'
                }, {
                    url: 'views/widget5.html',
                    width: '4'
                }]
            ]     
        };

我创建了自己的指令，完成了我在用例 https://gist.github.com/Abrissirba/157e4c3bb87e724b35e1 中要求的内容。

如果按需创建元素，请使用ng- 

<div ng-if="flag">
<div ng-repeat="widget in dashboard.widgets">
    <custom-directive name="{{widget.component}}">
</div>
</div>

控制器

app.directive('customDirective',fucntion(){
  return {
        restrict: 'A',
        scope:false,
        link: function (scope, elem, attr, ctrl) {
    scope.widgets = [{
        component: 'widgetA'
    },{
        component: 'widgetB'
    }];
  }
});
相关文章：