我正在尝试划分一大块代码。
我想创建一个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/