Using Bootstrap grid in angularjs components

Question

What I'm basically trying to do is wrap grid element divs into angular components. The effort is to reduce typing strokes and get a standard for inputs:

Which would render something like the following


   
       hey!

It works, kind of. The javascript works fine with the model binding, it's just that the CSS gets mangled. I have a codeopen here: https://codepen.io/anon/pen/JmxmoY?editors=1111

It has something to do with how the browser renders the in between the row div and the column div. If I open up dev tools and inspect the difference between and , there are none. Is there a way around this or am I SOL?

user_3706110 · Answer

Try this one

.component('bootstrapColumn', {
    bindings: {
        column: "@"
    },
    transclude: true,
    template: function ($element, $attrs) {
        $element.addClass('col-md-' + $attrs.column);
        return '';
    }
})

Are you trying to apply a specific solution with components? Cause you can try this as a Directive

.directive('bootstrapCol', function () {
    return {
        restrict: 'EAC',
        scope: {
            column: '@'
        },
        link: function (scope, element) {
            var tc = 'col-md-' + scope.column;
            element.addClass(tc);
        }
    }

})

It gives you plenty of properties either use it in your custom component

(function () {
    'use strict';
    angular
        .module('test', [])
        .component('bootstrapRow', {
            transclude: true,
            template: ''
        })
        .component('bootstrapColumn', {
            bindings: { column: "@"},
            transclude: true,
            template: function ($element, $attrs) {
                $element.addClass('col-md-' + $attrs.column);
                return '';
            }
        }).directive('bootstrapCol', function () {
            return {
                restrict: 'EAC',
                scope: { column: '@' },
                link: function (scope, element) {
                    var tc = 'col-md-' + scope.column;
                    element.addClass(tc);
                }
            };
        });
})();



    fun with bootstrap and elements
    
    


    
        
            
                
                    Input 1
                    
                
            
            
                
                    Input 2
                    
                
            
        

        
            
                
                    Input 3
                    
                
            

            
                
                    Input 4
                    
                
            
        

        
            
                
                    Element-As Component
                    
                
            
            
                
                    Class
                    
                
            
            
                
                    Property

user_6462089 · Answer


      
        
          
            {{stuff.name}}
          
          
            {{stuff.title}}
            {{stuff.desc}}

Using Bootstrap grid in angularjs components

2 Answers