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 code：

<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

Angular Js指令添加动态引导类

1 个答案: