在 angularjs 组件中使用 Bootstrap 网格

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

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

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>

.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);
        }
    }

})