Using an AngularJS directive to dynamically incorporate Bootstrap classes in the HTML elements

Question

Using an AngularJS directive to dynamically incorporate Bootstrap classes in the HTML elements

Our application is now incorporating reusable code by creating a simple directive to display content efficiently.

Directive 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 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>

Question:

The HTML code above shows col-md-2 and col-md-9 inside col-md-12. If there are three div elements with content occupying 4, 4, 4 respectively, but the last one has no content, we want the remaining two divs to take up 6 each instead of 4. This behavior needs to be implemented through the directive.

Please let me know if I need to clarify anything further.

javascript angularjs twitter-bootstrap angularjs-directive

Answer 1

Answer №1

To implement dynamic column sizing in Bootstrap, you can create a custom directive that watches for changes in the DOM structure and then adds corresponding Bootstrap classes.

Custom Directive

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);
                    }
                });
            });
        }
    }
});

Usage in HTML

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

Check out the demo on JSFiddle

Answer 2

To implement dynamic column sizing in Bootstrap, you can create a custom directive that watches for changes in the DOM structure and then adds corresponding Bootstrap classes.

Custom Directive

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);
                    }
                });
            });
        }
    }
});

Usage in HTML

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

Check out the demo on JSFiddle

Answer 3

Answer №2

Providing a generic example for usage, allowing you to customize it with your own content. Let's say you have three variables accessible in your scope: content, content2, and content3. Here is an example of how you can use them:

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

By default, the columns will have a width of col-md-6, but if there is content in the 3rd column, then the class col-md-4 will also be applied to ensure equal division among all three columns. The col-md-4 class takes priority over col-md-6.

Alternatively, for more clarity, you can utilize this structure as well:

<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 4

Providing a generic example for usage, allowing you to customize it with your own content. Let's say you have three variables accessible in your scope: content, content2, and content3. Here is an example of how you can use them:

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

By default, the columns will have a width of col-md-6, but if there is content in the 3rd column, then the class col-md-4 will also be applied to ensure equal division among all three columns. The col-md-4 class takes priority over col-md-6.

Alternatively, for more clarity, you can utilize this structure as well:

<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 5

Answer №3

After utilizing ng-class, you have the option to implement a function that will determine the 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>

Answer 6

After utilizing ng-class, you have the option to implement a function that will determine the 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>

Using an AngularJS directive to dynamically incorporate Bootstrap classes in the HTML elements

Answer №1

Answer №2

Answer №3

Similar questions

implementing multiple updates in Mongoose for MongoDB

How can I determine the remaining amount of scroll left in my HTML document?

What is the best way to add an insert button to every row?

What is the best way to send extra parameters to an ajax callback function?

Is it possible to implement PortalVue in multiple Vue.js single file components?

Is it possible to refresh HTML content using jQuery?

Different ways to provide user feedback on a SPA website following AJAX requests

Steps for including a subdocument within a mongoose schema

Error Encountered During JavaScript Form Validation

Angular encountered a 403 error while making an HTTP POST request

Achiever.js - Incorporating incremental progress with half stars instead of whole stars

Memory leakage in Internet Explorer as a result of JavaScript code

Fancybox operates successfully when I manually include a class, yet fails to function when utilizing jQuery's .addClass() method

Using Angular's ng-repeat directive to iterate over an array from JavaScript

React JS is not allowing me to enter any text into the input fields despite my attempts to remove the value props

What is the process of using an if statement in jQuery to verify the existence of a property in a JSON file?

Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

Latest News: The store is now received in the mutation, instead of the state

If the Request does not recognize the OAuth key, generate a fresh new key

using node.js to save query results as global variables