javascript - 如何让 AngularJS 组件与 Bootstrap 风格完美配合？-6ren

javascript - 如何让 AngularJS 组件与 Bootstrap 风格完美配合？

转载作者：行者123 更新时间：2023-11-28 04:29:49

我正在尝试划分一大块代码。

我想创建一个angularjs component对于要显示在 bootstrap panel 中的一条数据。这些面板将是可展开/可折叠的。

这是一个plunker

脚本.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: '='
  }
});

索引.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 工作方式，每个面板都与最后一个面板对接。

第二个面板组显示了我期望看到的内容，组中每个面板之间有一个小间隙。

我需要消除通过 Angular 插入的组件元素。但组件不支持按属性插入。

我知道 UI Bootstrap 有 Accordion ，但我想获得一个通用的解决方案来管理这样的事情，其中 Angular 插入可能会破坏 Bootstrap 的元素。

有什么想法吗？

Angularjs 1.5.3，Bootstrap 3.3.6

最佳答案

这是放置边距的 Bootstrap CSS:

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

因此，您需要在 .panel-group 内有一个 .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>

并使用指令而不是组件，因为它可以使用属性匹配而不是仅用于小猫面板的元素

关于javascript - 如何让 AngularJS 组件与 Bootstrap 风格完美配合？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44718162/

文章推荐： javascript - 使用 Jquery 实现单选

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何让 AngularJS 组件与 Bootstrap 风格完美配合？