Question

我正在尝试创建一个使用AngularJS显示两个日历控件的jsfiddle：

http://jsfiddle.net/edwardtanguay/pe4sfex6/10/

我的代码在本地工作。

我已将所有内容复制到jsfiddle，但似乎我通过脚本标记包含模板代码的方法无效：

<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>

我这样做了，当然，因为我无法访问jsfiddle上的文件，或者有没有办法在jsfiddle上执行此操作：

templateUrl: "templates/calendarTemplate.html",

如果没有，我如何让jsfiddle以本地方式处理text / ng-template脚本？

Answer 1

试试这个：

在框架＆amp;下面选择“没有换行<head>”扩展

在小提琴选项
下添加正文标记<body ng-app="demo">

这是updated Jsfiddle

解释

在您的JSfiddle中选择 onDomReady 选项，这意味着Javascript代码包含在onDomReady窗口事件中（请参阅JSfiddle文档中的frameworks and extensions）。为了允许AngularJS在DOM完全加载之前查看应用程序，请选择“无包装”选项（在<head>或<body>中）。

接下来，您需要更改JSfiddle options中的body标记。这是因为directive ng-app用于自动引导AngularJS应用程序

通常放在页面的根元素附近 - 例如在...上 <body>或<html>代码

如何在jsfiddle中使用text / ng-template脚本部分？

1 个答案:

解释