javascript - AngularJS指令模板类不呈现

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>'
        }
    };
});

这是一个演示

Answer 1

您的 CSS 规则不起作用，因为.innerdiv 不是 的直接子级.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 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>'
        }
    };
});

这是工作小提琴