Question

我正在创建一个小部件系统，我计划让每个小部件成为它自己的指令。我希望能够通过数组将应该从我的控制器使用的指令传递给我的视图。这就是我的代码目前的样子：

app.controller('showDashboard', function ($scope){
   $scope.widgets = ['widget1', 'widget2', 'widget3'];
});

在视图中：

<article ng-repeat="widget in widgets" class="widget">
    <div {{widget}}></div>
</article>

指令：

app.directive('widget1', function (){
    return {
        restrict: "A",
        templateUrl: 'testWidget.html'
    };
}).directive('widget2', function (){
    return {
        restrict: "A",
        templateUrl: 'testWidget.html'
    };
}).directive('widget3', function (){
    return {
        restrict: "A",
        templateUrl: 'testWidget.html'
    };
});

Answer 1

因此，为什么不使用ng-include加载模板，而不是将指令本身作为小部件，这些模板本身可以包含指令，控制器等......

app.controller('showDashboard', function ($scope){
   $scope.widgets = ['widget1.html', 'widget2.html', 'widget3.html'];
});

<article ng-repeat="widget in widgets" class="widget">
    <div ng-include="widget"></div>
</article>

这是jsFiddle with an example。

这是一个更新的小提琴，显示slightly more complex widget with a controller。

Answer 2

它可以改进但只是为了得到这个想法

//html
<div wrapper mydir="widget"></div>
//js
.directive('wrapper', function ($compile){
                return {
                    restrict: "A",
                    scope: {
                        mydir: "="
                    },
                    link: function ( scope, element ) {
                        var html = '<test '+scope.mydir+'></test>';
                        var compiled = $compile( html )( scope );
                        element.append(compiled);
                    }
                }
            })

是否可以在模板中动态加载指令？

2 个答案: