指令中的链接函数不画边框AngularJS

Question

嘿，我正在尝试为使用 ng-repeat 列出的项目制作边框，我使用了链接功能，但我不想工作，我不绘制边框，它只会创建破折号。

指令

    (function(){
  angular.module('app')
    .directive('myDirective', function(){
    return {
      restrict : 'E',
      scope : {
        list : '='
      },
      template: '<div class="dire" ng-repeat="item in list">{{item}}</div>', 
      link: function($scope, $element, $attrs) {
        $element.addClass('active');
      }
    }
  }); 

演示 https://codepen.io/Turqus/pen/mqKVWY?editors=1111

Answer 1

您的 div 元素是一个内联对象。您需要使用display: block; 使其成为block 或inline-block元素。这不取决于您的指令。这是 CSS 问题。

.active {
  border: 1px solid red;
  font-size: 50px;
  box-sizing: border-box;
  background-color: yellow;
  color: red;
  display: block;
}

>> CodePen