Question

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

指令代码：

requestAsync

HTML code：

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中你可以看到col-md-2里面的col-md-2和col-md-9，假设我有三个div元素，如果内容是3，那么其中三个占用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

Answer 2

我为您提供了一般用法，您可以轻松地将其与您的内容一起使用。假设您的范围中有三个可用变量：content，content2和content3。现在你可以这样写：

<div class="row">
    <div class="col-md-6" ng-class="{'col-md-4': content3}">{{content1}}</div>
    <div class="col-md-6" ng-class="{'col-md-4': content3}">{{content2}}</div>
    <div class="col-md-4" ng-show="content3">{{content3}}</div>
</div>

所以这里发生的事情是，默认情况下，col-md-6将被赋予列，如果第3列中有内容，那么我们也将使用类col-md-4以便所有三个列可以平分。 col-md-4优先于col-md-6。

或者，如果你想要更多的许可，你也可以这样写：

<div class="row">
    <div ng-class="{'col-md-4': content3, 'col-md-6': !content3}">{{content1}}</div>
    <div ng-class="{'col-md-4': content3, 'col-md-6': !content3}">{{content2}}</div>
    <div class="col-md-4" ng-show="content3">{{content3}}</div>
</div>

Answer 3

作为使用ng-class的后续操作，您还可以使用返回类的函数：

var app = angular.module('app', []);

app.directive('aboutDirective', function renderAboutContent(aboutService) {
  return {
    restrict: 'AE',
    scope: {},
    templateUrl: 'about.html',
    link: function(scope, element) {
      aboutService.getAboutContent()
        .then(function(results) {
          scope.aboutList = results.aboutContent.listItems;
        }, function(error) {
          console.log('controller error', error);
        });
      scope.colWidth = function(content) {
        return content.image && content.something ? 'col-xs-4' : 'col-xs-6';
      }
    }
  }
});

app.factory('aboutService', function($timeout) {
  return {
    getAboutContent: function() {
      return $timeout(function() {
        return {
          aboutContent: {
            listItems: [{
              image: 'image1',
              title: 'title1',
              description: 'desc1',
              something: 'something1'
            }, {
              image: 'image2',
              title: 'title2',
              description: 'desc2'
            }, {
              title: 'title3',
              description: 'desc3',
              something: 'something3'
            }]
          }
        };
      }, 1000);
    }
  };
});

.row {
  display: flex;
  text-align: center;
  color: #fff;
}
.image {
  background-color: #75b5aa;
  border: 1px solid #000;
}
.middle {
  background-color: #aa759f;
  border: 1px solid #000;
}
.something {
  background-color: #6a9fb5;
  border: 1px solid #000;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">

<div class="container" ng-app='app'>
  <about-directive></about-directive>
  
  <script type="text/ng-template" id="about.html">
    <div class="row" ng-repeat="content in aboutList">
      <div ng-if="content.image" class="image" ng-class="colWidth(content)">
        {{ content.image }}
      </div>
      <div class="middle" ng-class="colWidth(content)">
        <span><b>{{content.title}}</b></span>
        <br>
        <span>{{content.description}}</span>
      </div>
      <div ng-if="content.something" class="something" ng-class="colWidth(content)">
        {{content.something}}
      </div>
    </div>
  </script>
</div>

Angularjs使用指令动态添加引导类

3 个答案: