Question

我基本上想做的是将网格元素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

这与浏览器如何在行div和列div之间呈现<bootstrap-input-text>有关。如果我打开开发工具并检查<bootstrap-row>和<bootstrap-input-text>之间的区别，那就没有了。有没有解决的办法还是我要解决？

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

在angularjs组件中使用Bootstrap网格

2 个答案: