Question

我有一个返回模板的简单指令。问题是模板中使用的类不起作用。这是HTML代码：

 <div ng-app="mapp">
    <div ng-controller="ctrl">
        <div class="panel">
            <check-list></check-list>
        </div>
    </div>
</div>

这是指令：

.directive('checkList',function(){
    return {
        restrict:'E',
        template: function(elem,attrs){
            return '<div class="inner">Hello</div>'
        }
    };
});

这是一个DEMO

Answer 1

您的CSS规则不起作用，因为.inner div不是.panel的直接子项，因为Angular会将模板插入check-list元素。

您有两种选择。

第一种是使用指令的replace: true配置：

.directive('checkList',function() {
    return {
        replace: true,
        restrict: 'E',
        template: function(elem, attrs) {
            return '<div class="inner">Hello</div>';
        }
    };
});

演示1： http://jsfiddle.net/zo9wk8gd/2/

第二个是将CSS规则更改为

.panel .inner {
    background-color:blue;
}

演示2： http://jsfiddle.net/zo9wk8gd/4/

Answer 2

CSS解决方案：

你有风格

.panel > .inner{
    background-color:blue;
}

为.inner的直接子.panel定义了背景颜色蓝色，但您的结构是：

<div class="panel">
        <check-list><div class="inner">Hello</div></check-list>
    </div>

因此.inner不是.panel的直接子女

<小时/> 将您的风格更改为：http://jsfiddle.net/zo9wk8gd/1/

.panel  .inner{
    background-color:blue;
}

或此http://jsfiddle.net/zo9wk8gd/5/

 check-list >.inner{
    background-color:blue;
}

<小时/> 如果您想深入了解创建替换模板的正确方法，请参阅dfsq

中的answer

Answer 3

您的指令输出如下

    <check-list><div class="inner">Hello</div></check-list>

所以你得到如下的最终输出。

<div class="panel">
    <check-list><div class="inner">Hello</div></check-list>
</div>

因此选择器.panel > .inner将无法应用css规则。

采取效果只需更改指令：

.directive('checkList',function(){
    return {
        restrict:'E',
        template: function(elem,attrs){
            return '<div class="panel"><div class="inner">Hello</div></div>'
        }
    };
});

Here工作小提琴

AngularJS指令模板类不呈现

3 个答案: