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

Utilizing async/await in JavaScript within a class structure

Tips for receiving notifications when the Collapsible collapses

Compatibility with IE9: Using jQuery to send an AJAX POST request

What is the process for creating a server-side API call?

limitation in bootstrap ensures that only one collapse element is open at any

Tips on resolving the distinct key issue in React and eliminating it

Exploring the proper syntax of the reduce() method in JavaScript

Dynamically load scripts in angularJs

What is the best way to utilize JQuery AJAX to send XML data for a delete request?

Guide on updating and storing changes in a JSON file named 'file.json' using jQuery or JavaScript

Establish a route nickname for files outside the project directory

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Tips for updating the appearance of a ListItem with a click action

Having trouble modifying a nested object array within a treeview component in Reactjs

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Customize the behavior of jQuery cycle with an <a> tag

The lookAt method in THREE.js is not functioning properly when called after the rendering process

Navigate the page by scrolling the absolute positioned div

Anticipated outcome for absent callbacks in module API implementation

Utilizing useEffect in the header component of ReactJS/Next.js: A Comprehensive Guide