javascript - 如何通过绑定(bind)名称加载类限制 Angular 指令？

Question

场景:我有两个类限制指令定义。我想通过将它们的指令名称绑定(bind)到一个 div 类来将它们加载到它们自己的选项卡面板中。当我在 div 中明确设置类名时，指令将呈现得很好。但是，每当我尝试通过绑定(bind)设置类名时，它都不会呈现。

布局标记:

...

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade" id="{{component.id}}" ng-repeat="component in components">
    <h3>{{component.name}}</h3>
    <hr />
    <div class="{{content.directive}}"></div>
  </div>
</div>

也尝试过使用

ng-class="{{content.directive}}"

没用。

布局Javascript:

(function () {
    var demoLayoutCtrl = function ($scope) {
        $scope.components = [
            {
                name: "File Upload",
                directive: "file-demo",
                id: 1
            },
            {
                name: "Line Chart",
                directive: "line-chart-demo",
                id: 2
            }
        ];
    };

    demoLayoutCtrl.$inject = ['$scope'];

    var demoLayout = function () {
        return {
            restrict: 'EA',
            replace: true,
            templateUrl: '/Content/templates/demo/demo-layout.html',
            controller: demoLayoutCtrl
        };
    };

    angularApp.directive('demoLayout', demoLayout);
}());

非常感谢任何帮助!

编辑:这不是建议帖子的副本，因为我不是在询问如何根据类值有条件地应用指令。相反，我问的是直接将类限制指令的名称数据绑定(bind)到一个元素中，并让它呈现该指令。

Answer 1

尝试使用 ngSwitch :

<div ng-switch="content.directive">
    <div class="file-demo" ng-switch-when="file-demo"></div>
    <div class="line-chart-demo" ng-switch-when="line-chart-demo"></div>
</div>