AngularJS 指令模板 class 未呈现

Question

我有一个简单的指令，其中 returns 一个模板。问题是模板中使用的 class 不起作用。这是 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;
}

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

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

Here 正在工作 fiddle

AngularJS 指令模板 class 未呈现

AngularJS directive template class not rendering

javascript

angularjs

angularjs-directive

angularjs-templates