Question

为什么没有应用样式在以下代码中，我使用ng-transclude。Transclusion工作正常，唯一的问题是类.box未应用于span。为什么会这样？

transclude.html 是：

<html ng-app="myApp">
    <head>
        <script src="js/angular.js" type="text/javascript"></script>
        <script src="js/transclude.js" type="text/javascript"></script>

        <style type="text/css">
            .box{
               background-color: red; 
            }
        </style>

    </head>
    <body>

        <div sidebox title="Links">
            <ul>
                <li>first link</li>
                <li>2nd link</li>
            </ul>
        </div>        
    </body>
</html>

transclude.js 是：

var app = angular.module('myApp',[]);
app.directive('sidebox',function(){
    return {
      restrict:'A',
      transclude:true,
      scope:{
          title:'@'
      },
      template:'<div>\n\
        <h1>{{title}}</h1>\n\
        <span class="box" ng-transclude></span></div>\n\
'
    };
});

更新从源代码可以清楚地看出.box已应用，但它没有变为div红色。

Answer 1

<span>元素默认为display: inline。这意味着它只接受纯文本或标记文本，而不接受其他元素，特别是display: block元素，例如<ul>。

如果你真的想使用span（你应该使用div），你需要将它的css设置为display: block，以便根据块内容调整自身大小。或者display: inline-block如果你想要一些其他（内联）属性，同时保留块行为。但inline-block有一些您可能不想要的副作用。

这也不是一个角度问题，因为它只是一个简单的html / css问题。

为什么在翻译后没有应用css样式？

1 个答案: