css, html, angularjs or jade issue?

Question

I am having issue getting my css to display. I think its because I applied the html through a directive.

here is my js file:

angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope){
$scope.user = {
    name:'Chelsey',
    address:{
        street:'PO Box 123',
        city: 'Secret Rebel Base',
        planet: 'Yavin 4'
    },
    friends:[
        'Hans',
        'chewbacca',
        'Leia'
    ]
}

});

angular.module('app').directive('userInfoCard', function(){
return {
   templateUrl:"userInfoCard.html",
   restrict:"E",
   controller: function($scope){
       $scope.knightMe=function(user){
           user.rank="knight";
       };
   }
}
});

my root html:

  <!DOCTYPE html>
  <html ng-app="app">
    <head>
   <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">      </script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"     href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel ="stylesheet" href="style.jade" type="text/css/">
    <script src= "app.js"></script>
    </head>
    <body ng-controller = "mainCtrl" class="container" style ="padding-top:30px">
    <h1>Hello World!</h1>
    **<user-info-card></user-info-card>**
    </body>
    </html>

The html that I want the css applied too (user-info-card.html):

<div class="panel panel-Primary">
    **<div class="panel-heading">{{user.name}}</div>**
    <div class="panel-body">
        <div ng-show = 'user.address'>
            <h4>Address: </h4>
            {{user.address.street}}<br />
            {{user.address.city}}<br />
            {{user.address.planet}}
        </div><br />
        <h4> Friends:</h4>
        <ul>
            <li ng-repeat='friend in user.friends'>
                 {{friend}}
            </li>
        </ul>
        <div ng-show ="user.rank">
            Rank: {{user.rank}}
        </div>
        <button ng-show="!user.rank" class="btn btn-sucess" ng-click="knightMe(user)">Knight Me</button>
    </div>
</div>

and my css in jade:

style.
    .panel-heading {
       text-decoration-color: blue;
    }

I am just trying to get my css to display {{user.name}} in blue right now but it keeps saying that the class is never used. I am a little new to this so anything would be helpful.

Answer 1

text-decoration-color is for the color of the underline. You might want to use color instead.

Also, please note that text-decoration-color has, as of now, poor browser support. See browser support on caniuse

EDIT: Jade is a templating engine for html documents, not for css stylesheets. So in your root html, include the stylesheet as the following :

<link rel="stylesheet" href="style.css" type="text/css">

and in style.css :

.panel-heading {
   color: blue;
}

css, html, angularjs or jade issue?

Question

1 answers

solution1
0 ACCPTED 2015-03-01 00:02:10

css, html, angularjs or jade issue?

Question

1 answers

solution1 0 ACCPTED 2015-03-01 00:02:10

solution1
0 ACCPTED 2015-03-01 00:02:10