Angular Js指令添加动态引导程序类

Angular Js Directive to add dynamic bootstrap classes

本文关键字：引导程序 动态 添加 Js 指令 Angular      更新时间：2023-09-26

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

指令代码：

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中实现的。

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

这里可以利用ngClass来解决这个问题。请注意以下内容。。。

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

对于一些额外的阅读，这篇流行的博客文章是理解该指令提供的用法的一个很好的参考：使用ngClass 的多种方法

相关文章：