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

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

试试这个：

select "no wrap - in <head>" 在 框架和扩展
在 Fiddle 选项下添加正文标签 <body ng-app="demo">

这是updated Jsfiddle

说明

在您的 JSfiddle 中，选项 onDomReady 被 selected，这意味着 Javascript 代码被包装在 onDomReady window 事件（参见 JSfiddle 文档中的 frameworks and extensions）。为了让 AngularJS 在 DOM 完全加载之前看到应用程序，select 一个 "no wrap" 选项（在 <head> 或 <body> ).

接下来您需要更改 JSfiddle options. This is because the directive ng-app 中用于自动 bootstrap 一个 AngularJS 应用程序

的 body 标签

is typically placed near the root element of the page - e.g. on the <body> or <html> tags

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

How to use text/ng-template script section in jsfiddle?

javascript

jsfiddle

angularjs

说明