动态包含角度指令

Question

I have a situation where I would like to dynamically include directives/components to an angular template. The reason to why I want this is that I'm writing a dashboard which should be easy to extend with new widgets. I really like the directive/component thinking in angular and would prefer to be able to make a directive of each widget. I would then like to add each widget with an ng-repeat or something similar. This would make it very easy to add new widgets over time. My questions are first of all if this thinking is sound and secondly if anyone know if someone has written something like this that I can start with.

Example

vm.widgets = [{
    component: 'widgetA'
},{
    component: 'widgetB'
}]

<div ng-repeat="widget in dashboard.widgets">
    <ng-include-component name="widget.component">
</div>

Answer 1

Something like this worked for me:

Your view:

    <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>

Your controller:

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

Answer 2

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

Answer 3

use ng-if it creats elements on demand

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

Controller

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