javascript - Angular Js 指令添加动态 Bootstrap 类

Question

我们正在应用程序中实现可重用代码，为此我们创建了一个显示内容的简单指令。

指令代码:

angular.module("newsStore.moduleDirectives", [])
    .directive('renderAboutContent', ['aboutService', renderAboutContent]);

function renderAboutContent(aboutService) {
    return {
        restrict: 'AE',
        scope: {},
        templateUrl: 'templates/about.html',
        link: function (scope, element) {
            aboutService.getAboutContent()
                .then(function (results) {
                    scope.aboutList = results.aboutContent.listItems;
                }, function (error) {
                    console.log('controller error', error);
                });
        }
    }
}

HTML 代码:

<div class="col-md-12 aboutUs-ph padT10 content-ph_abt" ng-repeat="content in aboutList">
    <div class="col-md-2 form-group" ng-if="content.image">
        <img src="{{content.image}}" class="img-responsive" />
    </div>
    <div class="col-md-9">
        <span class="guidedTourText"><b>{{content.title}}</b></span>
        <br>
        <span>{{content.description}}</span>
    </div>
</div>

问题:

在上面的 HTML 中，您可以在 col-md-12 中看到 col-md-2 和 col-md-9，我们希望 col-md-2 和 col-md-9 宽度像有时图像一样动态显示可能不存在于 col-md-2 中，因此在这种情况下，文本应占据 col-md-12 而不是 col-md-9。

谢谢大家的回答，这个解决方案适用于这种情况，但有一个问题，假设我有三个 div 元素，如果内容存在，其中三个元素占用 4, 4 ,4 。假设如果最后一个 div 中不存在内容，则其余两个 div 应采用 6,6，反之亦然。我们希望从指令而不是 html 中实现这一点。

如果我不清楚，请告诉我。

Answer 1

使用ngClass可以在这里利用来解决这个问题。请注意以下几点...

ng-class="{'col-md-12': !content.image, 'col-md-9': !!content.image}"

对于一些额外的阅读，这篇流行的博客文章是理解该指令提供的用法的一个很好的引用:The Many Ways To Use ngClass