Question

根据人们使用的“导航”指令，页面内容需要有一定的填充。

这是由“content”指令完成的，这里称为“container”。

当元素位于容器内时，应用于容器的填充或边距似乎存在渲染问题。但只有文字才有问题。

我制作了2个片段，除了div里面完全相同的代码。第二个片段没有左边的填充

angular.module('app', [])


.directive('container', function(){
    
  return {
     restrict : 'E',
     link : function(scope, element){
        
       element.css('border', '1px solid red');
       element.css('padding', '100px');
       
     }
  };
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  
  <container>
    test
    </container>
  </div>

angular.module("app", [])

.directive('container', function(){

return {
  
  restrict : 'E',
  link : function(scope, element){
  
    element.css('border', '1px solid red');
    element.css('padding', '100px');
  
  }
  
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  
  <container>
    <div>TEST </div>
  </container>
  
</div>

Answer 1

最好的方法是添加css：

container{
  display: block;
}

否则，将padding / margin设置为指令内的div：

＆＃13;

angular.module('app', [])


.directive('container', function(){
    
  return {
     restrict : 'E',
     link : function(scope, element){
        
       element.children().css('border', '1px solid red');
       element.children().css('padding', '100px');
       
     }
  };
  
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  
  <container>
    <div>
      test
      </div>
    </container>
  </div>

＆＃13;

带填充的容器指令

1 个答案: