Question

我有以下日历控件：

<!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:@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-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文件中，而是包含在HTML文件中。不：

templateUrl: "templates/calendar.html",

但：

template: '<div class="header">...</div>',

所以我可以在jsfiddle上发布这个。

但是，当我这样做时，似乎带有所有角度命令的HTML太复杂而且无法正确显示。

如何将此模板HTML包含在一个文件中，以便将其发布到jsfiddle？

Answer 1

您可以使用脚本标记在主HTML文件中创建内联模板

<script type="text/ng-template" id="calendarTemplate">
 <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>
</script>

在定义指令时，将calendarTemplate设置为templateUrl

app.directive("calendar", function() {
            return {
                restrict: "E",
                templateUrl: "calendarTemplate",
                ...

有关详细信息，请参阅此blog post

我如何将模板HTML放在模板属性中？

1 个答案: