Использование сетки Bootstrap в компонентах angularjs - PullRequest
Новая
       7

Использование сетки Bootstrap в компонентах angularjs

0 голосов
/ 26 октября 2018

То, что я в основном пытаюсь сделать, это обернуть элементы сетки делением в угловые компоненты. Усилие состоит в том, чтобы уменьшить количество набираемых штрихов и получить стандарт для ввода: 

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

1 Ответ

0 голосов
/ 27 октября 2018

Попробуйте это 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...