Angularjs Adding Style to Directive (With Css File)

Question

I am trying to add a style to angularjs Directive with a seprated css file.

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]`
}

And my html file is :

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

And my directive HTML File:

<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>

I already saw that answer : How to CSS style angular directive?

But its didn't work out.

Thank you very much!

Can you explain what does not work, or make a Fiddle of your code? — Mistalis
– Mistalis, Commented Apr 26, 2017 at 14:26
I'm not entirely familiar with Angular, but does the CSS get compiled? Or is that static? — James King
– James King, Commented Apr 26, 2017 at 14:30
The Css Has not loaded , fixed it up by using div[index-nav-bar-directive] that getting me the current div(with the class inside) than get what needed either if that a .fa-plus (class) or h1,li — Ido Bleicher
– Ido Bleicher, Commented May 6, 2017 at 20:52

Ido Bleicher · Accepted Answer · 2017-04-26 14:35:39Z

Solved by Checking The Css inside : Suppose to be like this form (in css you can't reach to inner attribute like i did)

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

Collectives™ on Stack Overflow

Angularjs Adding Style to Directive (With Css File)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related