在 angularjs 组件中使用 Bootstrap 网格答案

【问题标题】：Using Bootstrap grid in angularjs components在 angularjs 组件中使用 Bootstrap 网格
【发布时间】：2019-03-31 14:07:45
【问题描述】：

我基本上想要做的是将网格元素 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 被破坏了。我这里有一个codeopen：https://codepen.io/anon/pen/JmxmoY?editors=1111

这与浏览器如何在行 div 和列 div 之间呈现<bootstrap-input-text> 有关。如果我打开开发工具并检查<bootstrap-row> 和<bootstrap-input-text> 之间的区别，则没有。有没有办法解决这个问题或者我是 SOL？

【问题讨论】：

在您的 codepen 中，您将输入包装在 .form-group 中。我想这就是你错过的
@graciano - 什么都不做。我更新了 codeopen 以反映将元素包裹在 .form-group

标签： javascript html css angularjs bootstrap-4

【解决方案1】：

试试这个

.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 doc 或 plunkr 或其他东西中，以证明它不会破坏行/列宽度值的 CSS 样式吗？
没关系，我就是这么做的。这个解决方案的巧妙之处在于我可以将 col-md-6 应用于 <bootstrap-col> 标记本身并跳过 <div> 模板。我想下一个问题是，是否可以将围绕<div> 样式的类应用于自定义元素？
我刚刚开始回复堆栈溢出问题。生病了。虽然我是在你的 codepen ref 上做到的。在 AngularJs 中，我将 AngularMaterialJs[1] 用于其灵活的组件，您可以将它们与引导程序一起使用。请记住您在模板上设计的布局，您可能需要 xs sm lg 等网格属性。我过去常常避免对元素进行样式设置，因为过去我在自定义插件上存在重叠。 GL 远好[1]：material.angularjs.org/latest/layout/alignment
仅供参考 - 这是一个引导 css 网格而不是角度材料网格。事实上，就表单输入而言，客户并不喜欢 Material 的外观。

【解决方案2】：

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

【讨论】：

这不是这个问题的一个很好的答案。它不仅格式很差，而且即使格式更好，也没有描述它的作用或它的哪些部分与问题相关；相反，它只是一个代码粘贴，对未来的人并没有真正的帮助。