Использование сетки Bootstrap в компонентах angularjs
В основном я пытаюсь обернуть div элементов сетки в угловые компоненты. Усилия состоят в том, чтобы уменьшить количество набираемых штрихов и получить стандарт для ввода:
<bootstrap-row>
<bootstrap-input-text col=6 ng-model = "$ctrl.model" label = "hey!">
</bootstrap-row>
Что бы отобразить что-то вроде следующего
<div class = "row">
<div class = "col-md-6">
<label>hey!</label>
<input type = "text" ng-model = "$ctrl.model">
</div>
</div>
Это вроде как работает. JavaScript отлично работает с привязкой модели, просто CSS искажается. У меня есть открытый код: https://codepen.io/anon/pen/JmxmoY?editors=1111
Это как-то связано с тем, как браузер отображает <bootstrap-input-text> между div строки и div столбца. Если я открою инструменты разработчика и проверю разницу между <bootstrap-row> и <bootstrap-input-text>, то их не будет. Есть ли способ обойти это или я SOL?
@graciano - это ничего не делает. Я обновил codeopen, чтобы отразить обертывание элементов вокруг .form-group
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуй это
.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);
}
}
})
Он дает вам множество свойств, либо используйте его в своем пользовательском компоненте.
<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>Насколько я понимаю, компоненты по большей части избавляются от директив. Вам действительно больше не нужны директивы с добавлением компонентов в 1.5. Однако можете ли вы поместить это в документ codepen или plunkr или что-то еще, чтобы продемонстрировать, что он не портит стили CSS для значений ширины строки / столбца?
Неважно, что я только что это сделал. В этом решении хорошо то, что я могу применить col-md-6 к самому тегу <bootstrap-col> и пропустить шаблон <div>. Я предполагаю, что следующий вопрос: можно ли вместо этого применять класс, стилизованный под <div>, к настраиваемому элементу?
Я только начал отвечать на переполнение стека. плохо иметь в виду. Хотя я сделал это на вашем коде исх. В AngularJs я использовал AngularMaterialJs [1] для его гибких компонентов, которые вы можете использовать с начальной загрузкой. Примите во внимание макет вашего устройства в шаблоне, вам могут понадобиться свойства сетки xs sm lg и т. д. Я использую, чтобы избежать стилизации элементов, потому что в прошлом у меня были перекрытия в настраиваемых плагинах. GL очень хорошо [1]: material.angularjs.org/latest/layout/alignment
К вашему сведению - это сетка начальной загрузки css, а не угловая сетка материалов. На самом деле клиенту не нравится, как выглядит Материал в том, что касается входных данных формы.
<div class = "row" ng-controller = "PortfolioCtrl">
<div class = "col-lg-4 col-md-4 col-sm-6 mb-3" ng-repeat-start = "stuff in profile track by $index">
<div class = "card">
<div class = "card-header">
{{stuff.name}}
</div>
<div class = "card-body">
<h5 class = "card-title">{{stuff.title}}</h5>
<p class = "card-text text-justify">{{stuff.desc}}</p>
</div>
</div>
</div>
<div ng-repeat-end>
<div class = "clearfix visible-lg-block" ng-if = "($index+1) % 6 == 0"></div>
<div class = "clearfix visible-md-block" ng-if = "($index+1) % 3 == 0"></div>
<div class = "clearfix visible-sm-block" ng-if = "($index+1) % 2 == 0"></div>
</div>
</div>
Это не очень хороший ответ на этот вопрос. Он не только очень плохо отформатирован, но даже если он был отформатирован лучше, нет описания того, что он делает или какие части имеют отношение к вопросу; Вместо этого это просто вставка кода, которая не особо поможет людям в будущем.
В вашем коде вы обертываете ввод в
.form-group. Я думаю, это то, что ты пропустил