Question

我正在尝试使用分离的css文件为angularjs指令添加样式。

index-nav-bar-directive{

    ul{
        list-style: none;
        margin: 0;
        padding: 0; 
    }
    h1{
        background-color: #2980b9;
        color:white;
        margin: 0;
        padding: 10px 20px;
        text-transform: uppercase;
        font-size: 24px;
        font-weight: normal;
    }

    .fa-plus{
        float: right;
    }`[![enter code here][1]][1]`
}

我的html文件是：

<body ng-app="IndexApp" ng-controller="indexController">
    <index-nav-bar-directive> </index-nav-bar-directive>
</body>

我的指令HTML文件：

<div class="root">
        <div id="container" class="col-md-2">
            <h1> Mongo : Data Bases</h1>
            <ul id="todoList">
                <li><span><i class="fa fa-trash"></i></span> Go to Hogwards</li>
                <li><SPAN><i class="fa fa-trash"></i></SPAN> Go to Potions class</li>
                <li><span><i class="fa fa-trash"></i></span> Kill Voldemort</li>
            </ul>

        </div>
</div>

我已经看到了答案： How to CSS style angular directive?

但它没有成功。

非常感谢！

Answer 1

通过检查内部的Css解决：假设像这样的形式（在css中你不能像我那样达到内在属性）

div[index-nav-bar-directive] ul{
    list-style: none;
    margin: 0;
    padding: 0;

}
 div[index-nav-bar-directive] h1{
    background-color: #2980b9;
    color:white;
    margin: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: normal;
}

div[index-nav-bar-directive] .fa-plus{
    float: right;
}

div[index-nav-bar-directive] li{    
    cursor: pointer;
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    color: #666;
}

div[index-nav-bar-directive] span{
    background-color: #e74c3c;
    height: 40px;
    margin-right:20px;
    text-align: center; 
    color: white;
    width: 0;
    display: inline-block;
    opacity: 0;
    transition: 0.2s linear;

}
 div[index-nav-bar-directive] li:hover span{
    width: 40px;
    opacity: 1.0
}
 div[index-nav-bar-directive] input{
    font-size: 18px;
    color: #2980b9;
    background-color: #f7f7f7;
    width: 100%;
    padding: 13px 13px 13px 20px;
    box-sizing: border-box;
    border: 3px solid rgba(0,0,0,0);
}

div[index-nav-bar-directive] #container{
    background-color: #f7f7f7;
    width: 360px;
    margin: 100px auto;
    box-shadow: 0px 0px 7px 1px grey;
}

Angularjs向指令添加样式（使用Css文件）

1 个答案: