0
У меня есть следующий календарный контроль:Как я могу поместить шаблон HTML в атрибут в шаблоне?
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta name="viewport" content="width=device-width" />
<title text="">Angular JS Calendar Demo</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<style type="text/less">
body { font-family:Arial; font-size:14px; }
body>span, body>h1 { float:left; width:100%; margin:0; padding:0; margin-bottom:10px; }
span { color:#888888;
>b { color:black; }
}
.vertical-centre (@height) { height:@height; line-height:@height !important; display:inline-block; vertical-align:middle; }
.border-box { box-sizing:border-box; -moz-box-sizing:border-box; }
@border-colour:#CCC;
calendar { float:left; display:block; .border-box; background:white; width:300px; border:solid 1px @border-colour; margin-bottom:10px;
@secondary-colour:#2875C7;
@spacing:10px;
@icon-width:40px;
@header-height:40px;
>div.header { float:left; width:100%; background:@secondary-colour; height:@header-height; color:white;
>* { .vertical-centre(@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:@[email protected]; 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-colour;
&:first-child { border-top:none; }
>span.day { float:left; width:100%/7; .border-box; border-left:solid 1px @border-colour; 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-colour; color:white; }
}
&.names>span { color:@secondary-colour; font-weight:bold; }
}
}
</style>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js"></script>
<!-- NOT USED <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-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">
var app = angular.module("demo", []);
app.controller("calendarDemo", function($scope) {
$scope.day = moment();
});
app.directive("calendar", function() {
return {
restrict: "E",
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;
}
});
</script>
</head>
<body ng-controller="calendarDemo">
<h1>Solista: calendar_chrisharrington</h1>
<div>
<calendar selected="day"></calendar>
<span>Selected date: <b>{{day.format('dddd, MMMM Do YYYY')}}</b></span>
</div>
<div>
<calendar selected="day"></calendar>
<span>Selected date: <b>{{day.format('dddd, MMMM Do YYYY')}}</b></span>
</div>
</body>
</html>
, который использует этот шаблон: calendar.html
<div class="header">
<i class="fa fa-angle-left" ng-click="previous()"></i>
<span>{{month.format("MMMM, YYYY")}}</span>
<i class="fa fa-angle-right" ng-click="next()"></i>
</div>
<div class="week names">
<span class="day">Sun</span>
<span class="day">Mon</span>
<span class="day">Tue</span>
<span class="day">Wed</span>
<span class="day">Thu</span>
<span class="day">Fri</span>
<span class="day">Sat</span>
</div>
<div class="week" ng-repeat="week in weeks">
<span class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected) }" ng-click="select(day)" ng-repeat="day in week.days">{{day.number}}</span>
</div>
Но я хотел бы включить шаблон HTML не в виде файла, а как HTML, например нет:
templateUrl: "templates/calendar.html",
но:
template: '<div class="header">...</div>',
, так что я могу отправить это на jsfiddle.
Но когда я это делаю, кажется, что HTML со всеми угловыми командами в нем слишком сложный и он отображается неправильно.
Как включить этот шаблон HTML в один файл, чтобы опубликовать его в jsfiddle?