ディレクティブ内のlink関数は境界線を描画しません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