Question

所以我确信这很简单，但我无法弄明白..我的指令正在发挥作用，但css不是。这是一个离子框架项目

我的index.html是加载css的主要模板

...
<link href="css/style.css" rel="stylesheet">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="js/services.js"></script>
<script src="js/calendar.js"></script>
</head>
<body ng-app="starter">
...

tab-dash.html正在通过离子

加载

<ion-view view-title="Dashboard">
<ion-content class="padding">
<div class="list card">
  <div class="item item-divider">Recent Updates</div>
  <div class="item item-body">
    <div>
      There is a fire in <b>sector 3</b>
    </div>
  </div>
</div>
<div class="list card">
  <div class="item item-divider">Health</div>
  <div class="item item-body">
    <div>
      You ate an apple today!
    </div>
  </div>
</div>
<div class="list card">
  <div class="item item-divider">Calendar</div>
  <div class="item item-body">
      <calendar selected="day"></calendar>
  </div>
</div>

style.css

calendar
{
float:left;
display:block;
.border-box;
background:white;
width:300px;
border:solid 1px @border-color;
margin-bottom:10px;
@secondary-color:#2875C7;
@spacing:10px;
@icon-width:40px;
@header-height:40px;
>div.header
{
    float:left;
    width:100%;
    background:@secondary-color;
    height:@header-height;
    color:white;
    >* {  .vertical-center(@header-height); }
    >i
    {
        float:left;
        width:@icon-width;
        font-size:1.125em;
        font-weight:bold;
        position:relative;
        .border-box;
        padding:0 @spacing;
        cursor:pointer;
    }
    >i.fa-angle-left { text-align:left; }
    >i.fa-angle-right
    {
        text-align:right;
        margin-left:@icon-width*-1;
    }
    >span
    { 
        float:left;
        width:100%;
        font-weight:bold;
        text-transform:uppercase;
        .border-box;
        padding-left:@icon-width+@spacing;
        margin-left:@icon-width*-1;
        text-align:center;
        padding-right:@icon-width;
        color:inherit;
    }
}
>div.week
{
    float:left;
    width:100%;
    border-top:solid 1px @border-color;
    &:first-child { border-top:none; }
    >span.day {
        float:left;
        width:100%/7;
        .border-box;
        border-left:solid 1px @border-color;
        font-size:0.75em;
        text-align:center;
        .vertical-centre(30px);
        background:white;
        cursor:pointer;
        color:black;
        &:first-child { border-left:none; }
        &.today { background:#E3F2FF; }
        &.different-month { color:#C0C0C0; }
        &.selected {
            background:@secondary-color;
            color:white;
        }
    }
    &.names>span {
        color:@secondary-color;
        font-weight:bold;
    }
}
}

calendar.js

angular.module('starter.Directives', []);
angular.module('starter.Directives').directive("calendar", function(){
return {
    restrict: "AEC",
    templateUrl: "templates/calendar.html",
    scope: { selected: "=" },
    link: function(scope) {
        scope.selected = _removeTime(scope.selected || moment());
        scope.month = scope.selected.clone();
        var start = scope.selected.clone();
        start.date(1);
        _removeTime(start.day(0));
        _buildMonth(scope, start, scope.month);
        scope.select = function(day) { scope.selected = day.date; };
        scope.next = function() {
            var next = scope.month.clone();
            _removeTime(next.month(next.month()+1).date(1));
            scope.month.month(scope.month.month()+1);
            _buildMonth(scope, next, scope.month);
        };
        scope.previous = function() {
            var previous = scope.month.clone();
            _removeTime(previous.month(previous.month()-1).date(1));
            scope.month.month(scope.month.month()-1);
            _buildMonth(scope, previous, scope.month);
        };
    }
};
function _removeTime(date){ 
    return date.day(0).hour(0).minute(0).second(0).millisecond(0); }
function _buildMonth(scope, start, month) {
    scope.weeks = [];
    var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
    while (!done) {
        scope.weeks.push({ days: _buildWeek(date.clone(), month) });
        date.add(1, "w");
        done = count++ > 2 && monthIndex !== date.month();
        monthIndex = date.month();
    }
}
function _buildWeek(date, month) {
    var days = [];
    for (var i = 0; i < 7; i++) {
        days.push({
            name: date.format("dd").substring(0, 1),
            number: date.date(),
            isCurrentMonth: date.month() === month.month(),
            isToday: date.isSame(new Date(), "day"),
            date: date
        });
        date = date.clone();
        date.add(1, "d");
    }
    return days;
}
});

Angular显然正在加载。它的工作和生成日历应该如此，但没有任何CSS。那我做错了什么？

查看safari中的调试器，没有任何类型的错误或警告。和铬一样。

Angularjs指令css不起作用

0 个答案: