Question

场景：我有两个类限制指令定义。我想通过将它们的指令名称绑定到div类来将它们加载到自己的选项卡面板中。当我在div中显式设置类名时，指令将呈现正常。但是，每当我尝试通过绑定设置类名时，它都不会呈现。

布局标记：

...

<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);
}());

非常感谢任何帮助！

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

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>

如何通过绑定名称加载类限制的Angular指令？

1 个答案: