我正在尝试创建一个使用 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 脚本?
最佳答案
试试这个:
- 在框架和扩展下选择“不换行 -
<head>
” - 添加正文标签
<body ng-app="demo">
在 fiddle 选项下
说明
在 JSfiddle 中,选择了选项 onDomReady,这意味着 Javascript 代码被包装在 onDomReady
中。窗口事件(请参阅 JSfiddle 文档中的 frameworks and extensions)。为了允许 AngularJS 在 DOM 完全加载之前看到应用程序,请选择“不换行”选项(在 <head>
或 <body>
中)。
接下来您需要更改 body
标签 JSfiddle options 。这是因为directive ng-app
用于自动引导 AngularJS 应用程序
is typically placed near the root element of the page - e.g. on the
<body>
or<html>
tags
关于javascript - 如何在jsfiddle中使用text/ng-template脚本部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31877291/