Menu
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:
<bootstrap-row>
<bootstrap-input-text col=6 ng-model="$ctrl.model" label="hey!">
</bootstrap-row>
Which would render something like the following
<div class="row">
<div class="col-md-6">
<label>hey!</label>
<input type="text" ng-model="$ctrl.model">
</div>
</div>
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 <bootstrap-input-text> in between the row div and the column div. If I open up dev tools and inspect the difference between <bootstrap-row> and <bootstrap-input-text>, there are none. Is there a way around this or am I SOL?
495
Try this one
.component('bootstrapColumn', {
bindings: {
column: "@"
},
transclude: true,
template: function ($element, $attrs) {
$element.addClass('col-md-' + $attrs.column);
return '<div ng-transclude></div>';
}
})
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
<bootstrap-row>
<bootstrap-col column="4">
<label>Input 5</label>
<input type="text" class="form-control">
</bootstrap-col>
<div class="bootstrap-col" column="4">
<label>Class</label>
<input type="text" class="form-control">
</div>
<div bootstrap-col column="4">
<label>Property</label>
<input type="text" class="form-control">
</div>
</bootstrap-row>
(function () {
'use strict';
angular
.module('test', [])
.component('bootstrapRow', {
transclude: true,
template: '<div class="row" ng-transclude></div>'
})
.component('bootstrapColumn', {
bindings: { column: "@"},
transclude: true,
template: function ($element, $attrs) {
$element.addClass('col-md-' + $attrs.column);
return '<div ng-transclude></div>';
}
}).directive('bootstrapCol', function () {
return {
restrict: 'EAC',
scope: { column: '@' },
link: function (scope, element) {
var tc = 'col-md-' + scope.column;
element.addClass(tc);
}
};
});
})();<html>
<head>
<title>fun with bootstrap and elements</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
</head>
<body ng-app="test">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Input 1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Input 2</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<bootstrap-row>
<bootstrap-column column="6">
<div class="form-group">
<label>Input 3</label>
<input type="text" class="form-control">
</div>
</bootstrap-column>
<bootstrap-column column="6">
<div class="form-group">
<label>Input 4</label>
<input type="text" class="form-control">
</div>
</bootstrap-column>
</bootstrap-row>
<bootstrap-row>
<bootstrap-col column="4">
<div class="form-group">
<label>Element-As Component</label>
<input type="text" class="form-control">
</div>
</bootstrap-col>
<div class="bootstrap-col" column="4">
<div class="form-group">
<label>Class</label>
<input type="text" class="form-control">
</div>
</div>
<div bootstrap-col column="4">
<div class="form-group">
<label>Property</label>
<input type="text" class="form-control">
</div>
</div>
</bootstrap-row>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
