javascript - Angularjs 使用指令动态添加 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-2 和 col-md-9 在 col-md-12 中，假设我有三个 div 元素，如果内容是，其中三个占据 4, 4 ,4展示。假设如果最后一个 div 中不存在内容，则其余两个 div 应采用 6,6，反之亦然。我们希望从指令中实现这一点。

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

Answer 1

我会在您的链接函数中设置一个 $watch。 $watch 将监视一个函数，该函数将查找 DOM 更改(即 DIV 子项更改)。根据 DOM 的状态，然后动态添加 col-* 属性

指令

app.directive('bootstrapColumns', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (!element.hasClass('row'))
                element.addClass('row');


            scope.$watch(function() {
                var elems = element[0].childNodes;
                var count =0;
                angular.forEach(elems, function(e) {

                    if (e.tagName == 'DIV' && angular.element(e).text() != '')
                        ++count;
                });
                return count;
            },
            function(cols) {
                var colNum = 12 / cols;
                var cssClass = 'col-xs-' + colNum;
                var elems = element[0].childNodes;
                angular.forEach(elems, function(e) {
                    if (e.tagName == 'DIV') {
                        var div = angular.element(e);                  
                        if (div.text() != '' && !div.hasClass(cssClass))
                            div.addClass(cssClass);
                    }
                });
            });
        }
    }
});

HTML

<div bootstrap-columns>
   <div>Column1</div>
   <div>Column2</div>  
</div>

Demo Fiddle