css、html、angularjs或翡翠版

css, html, angularjs or jade issue?

本文关键字：angularjs html css      更新时间：2023-09-26

我在显示css时遇到问题。我认为这是因为我通过指令应用了html。

这是我的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";
       };
   }
}
});

我的根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>

我希望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>

和我的翡翠css：

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

我现在只是想让我的css以蓝色显示｛｛user.name｝｝，但它一直说这个类从未被使用过。我对此有点陌生，所以任何事情都会有所帮助。

text-decoration-color表示下划线的颜色。您可能需要使用color。

此外，请注意，截至目前，text-decoration-color对浏览器的支持较差。查看犬科上的浏览器支持

EDIT:Jade是html文档的模板引擎，而不是css样式表的模板引擎。因此，在根html中，包括如下样式表：

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

并且在style.css中：

.panel-heading {
   color: blue;
}
相关文章：