Angular Js 指令添加动态引导类

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