css，html，angularjs还是玉问题？

Question

I am having issue getting my css to display. 我有问题让我的CSS显示。 I think its because I applied the html through a directive. 我认为这是因为我通过指令应用了html。

here is my js file: 这是我的js文件：

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: 我的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): 我想要css应用的html（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: 和我在玉中的css：

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. 我只是试图让我的CSS现在以蓝色显示{{user.name}}，但它一直说该类从未使用过。 I am a little new to this so anything would be helpful. 我对此有点新意，所以任何事情都会有所帮助。

Answer 1

text-decoration-color is for the color of the underline. text-decoration-color用于下划线的颜色。 You might want to use color instead. 您可能想要使用color 。

Also, please note that text-decoration-color has, as of now, poor browser support. 此外，请注意，截至目前， text-decoration-color浏览器支持较差。 See browser support on caniuse 请参阅caniuse上的浏览器支持

EDIT: Jade is a templating engine for html documents, not for css stylesheets. 编辑：Jade是html文档的模板引擎，而不是css样式表。 So in your root html, include the stylesheet as the following : 所以在你的root html中，包括样式表如下：

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

and in style.css : 并在style.css中 ：

.panel-heading {
   color: blue;
}

css，html，angularjs还是玉问题？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-01 00:02:10

css，html，angularjs还是玉问题？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-01 00:02:10

解决方案1
0 已采纳 2015-03-01 00:02:10