Question

我之前使用角度1.6.0和角度材料1.1.1进行了聊天，并遇到了一些问题。我的目标是当消息被添加到聊天的底部时，只有当消息已经位于聊天的底部时，才能将用户滚动到聊天的底部。每次将消息添加到DOM时，我都不希望用户必须向下滚动。我的自动滚动只在某些时候工作，所以我发现有更多的高度下落不明。我发现布局填充属性是罪魁祸首。当应用于包含消息模板的指令时，它会中断。当我说断裂时，我的意思是它增加了很多高度，几乎看起来是DOM的一个额外元素（message.ng-isolate-scope）。

为什么会这样？有解释吗？我的解决方案基本上只是从聊天容器中删除layout-padding属性。看看下面的图片和我的plunker。

Message template(directive) with layout-padding has height 87 (INCORRECT, should be 51). 注意，如果删除了layout-padding属性，则指令的高度是正确的

Plunker： http://plnkr.co/edit/Y2UmFwg2gGaMcHsGVChs?p=preview

＆＃13;

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

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

Answer 1

简化后，您的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中为16px），而绿色是填充。

一个简单的解决方案是将display元素的message值更改为block而不是inline。然后它将包装并与container类的嵌套元素大小相同，并且填充将正常工作。

演示： http://plnkr.co/edit/gFSUWt9H2sLkUzCH8Q7n?p=preview

Angular material 1.1.1布局填充问题与指令

1 个答案: