我早些时候使用 angular 1.6.0 和 angular material 1.1.1 进行了聊天，遇到了一些问题。我的目标是让用户滚动到聊天底部，当一条消息附加到聊天底部时，只有当他们已经在聊天底部时。我不希望用户每次向 DOM 添加消息时都必须向下滚动。我的自动滚动只在某些时候起作用，所以我发现有额外的高度不明。我发现 layout-padding 属性是罪魁祸首。当应用于包含消息模板的指令时，它会中断。当我说 break 时，我的意思是它增加了很多高度，几乎是 DOM 的额外元素 (message.ng-isolate-scope)。
为什么会这样？有解释吗？我的解决方案基本上是从我的聊天容器中删除 layout-padding 属性。看看下面的图片和我的 plunker。
Message template(directive) with layout-padding has height 87 (INCORRECT, should be 51). 请注意，如果删除了 layout-padding 属性，指令的高度是正确的
笨蛋: http://plnkr.co/edit/Y2UmFwg2gGaMcHsGVChs?p=preview
var app = angular.module('MyApp', ['ngMaterial']);
app.controller("RootCtrl", function($scope, $compile, $timeout) {})
.directive("message", function() {
return {
restrict: "E",
scope: {},
templateUrl: 'message.html',
link: function(scope, elem, attrs) {
scope.message = {
time: '12:30pm',
content: 'Same message, but implemented via directive'
}
}
};
});.container .message {
background-color: #009688;
color: white;
margin-top: 3px;
border-radius: 5px;
margin-left: 50px;
}
.container .timestamp {
color: gray;
font-size: 12px;
text-align: right;
}<!-- message.html -->
<div class="container">
<div>
<div class="timestamp">{{message.time}}</div>
<div class="message">
{{message.content}}
</div>
</div>
</div>
<!-- -->
<!-- After looking at the heights for each of the containers w/o layout-padding, uncomment the following and look at the heights again. The message directive looks like its split into two elements: message.ng-isolate-scope and the actual template for the message. Why? -->
<!-- <body ng-controller="RootCtrl" layout-padding> -->
<body ng-controller="RootCtrl">
<br><br><br><br>
<div class="container">
<div>
<div class="timestamp">
12:30pm
</div>
<div class="message">
This is my message
</div>
</div>
</div>
<!-- This directive has the same template as the container above -->
<message></message>
</body>最佳答案
简化后，您的 HTML 在呈现时看起来像这样:
<body class="layout-padding">
<div class="container">
Message 1
</div>
<message>
<div class="container">
Message 2
</div>
</message>
</body>
angular-material.css 中的规则之一是:
.layout-padding > * {
padding: 8px;
}
这意味着具有 layout-padding 类的元素的所有直接子元素都将获得指定的填充值。
在上面的示例 HTML 中，第一个元素是 container 类和 message 元素(而不是第二个元素是 container 类)。
作为无效的 HTML 元素，message 将是 display: inline(至少在 Chrome 中，取决于浏览器实现)，这就是为什么它看起来像在您的图像。图片中选区的蓝色部分是默认字体大小的高度(Chrome 中为 16 像素)，而绿色部分是填充。
一个简单的解决方案是将message 元素的display 值更改为block 而不是inline。然后它将换行并与具有 container 类的嵌套元素大小相同，填充将正常工作。
关于javascript - Angular Material 1.1.1 布局填充问题与指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41297867/