Question

我试图划分大量的代码。

我想为要在angularjs component中显示的数据创建bootstrap panel。这些面板将是可扩展/可折叠的。

的script.js：

var app = angular.module('app', [])

.controller('kittenController', function () {
  const $ctrl = this;
  $ctrl.click = function () {
    console.log(`You clicked on ${$ctrl.kitten}!`);
  };
})

.component('kittenPanel', {
  templateUrl: 'kitten-panel.template',
  controller: 'kittenController',
  bindings: {
    kitten: '='
  }
});

的index.html：

<!DOCTYPE html>
<html >

  <head>
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="angularjs@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-init="kittens=[{name: 'Brian', colour: 'Black'}, {name: 'Penny', colour: 'White'},{name: 'Stephanie', colour:'Tortoiseshell'}]">

    <script type="text/ng-template" id="kitten-panel.template">
      <div class="panel panel-default">
        <div class="panel-heading">{{$ctrl.kitten.name}}</div>
        <div class="panel-body">{{$ctrl.kitten.colour}}</div>
      </div>
    </script>

    <div class="panel-group">
        <kitten-panel kitten="k" ng-repeat="k in kittens"></kitten-panel>
    </div>

    <div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">Heading 1</div>
        <div class="panel-body">Content 1</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Heading 2</div>
        <div class="panel-body">Content 2</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Heading 3</div>
        <div class="panel-body">Content 3</div>
      </div>
    </div>
  </body>

</html>

你可以看到每个面板与最后一个面板相对应，因为Bootstrap的CSS工作方式。

第二个小组显示了我期望看到的内容，小组中每个小组之间的差距很小。

我需要消除由角度插入的组件元素。但是组件不支持按属性插入。

我知道UI Bootstrap有手风琴，但我想得到一个关于如何管理这样的事情的通用解决方案，其中angular插入可能会破坏bootstrap的元素。

有什么想法吗？

Angularjs 1.5.3，Bootstrap 3.3.6

Answer 1

这是设置保证金的bootstrap css：

.panel-group .panel+.panel{
    margin-top: 5px;
}

所以你需要一个.panel组内的.panel，它来自另一个.panel。换句话说，.panel元素必须位于同一级别。如果将它们封装在其他元素中，则此css规则不适用。

<div class="panel-group">
       <div class="panel panel-default" ng-repeat="k in kittens">
            <div class="panel-heading">{{k.name}}</div>
            <div class="panel-body">{{k.colour}}</div>
       </div>
</div>

编辑：使用模板：

<script type="text/ng-template" id="kitten-panel.template">
    <div class="panel-heading">{{$ctrl.kitten.name}}</div>
    <div class="panel-body">{{$ctrl.kitten.colour}}</div>
</script>

<div class="panel-group">    
  <div kitten-panel kitten="k" ng-repeat="k in kittens" class="panel panel-default"></div>
</div>

使用指令而不是组件，因为它可以使用属性匹配而不是只用于kitten-panel的元素

如何让AngularJS组件与Bootstrap风格搭配得很好？

1 个答案: