Javascript AngularJS指令模板类未呈现

我有一个返回模板的简单指令。问题是模板中使用的类不起作用。以下是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>'
        }
    };
});

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

.directive（'checkList'，function（）{
返回{
限制：'E'，
模板：函数（元素、属性）{
返回“你好”
}
};
});

---

这里有一个您的CSS规则不起作用，因为

.internal

div不是

.panel

的直接子元素，因为Angular将模板插入

检查列表

元素

你有两个选择

第一种方法是使用指令的

replace:true

配置：

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

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

---

演示2:

CSS解决方案：

你很有风格

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

它为

.panel

的直接子级

.internal

定义了一个蓝色背景，但您拥有的结构是：

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

还是这个

---

---

如果您想深入了解创建替换模板的正确方法，请参见dfsq中的指令输出，如下所示

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

---

正在工作的小提琴

似乎

replace

已被弃用：@Cherniv是的，它将在Angular v2.0中删除。但我不担心这一点，因为无论如何，从v1.x到v2.0都不容易迁移。而不是因为

替换
：）
    <check-list><div class="inner">Hello</div></check-list>

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

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