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

标签 javascript angularjs jsfiddle

我正在尝试创建一个使用 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 选项

这是updated Jsfiddle

说明

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

相关文章:

javascript - 为什么状态没有按预期更新?

javascript - JavaScript 中的作用域 - 将其概念化为树是否正确?

javascript - JavaScript 可以连接 MySQL 吗?

javascript - AngularJS 1.x : perform code while in data-ng-repeat. ..?

javascript - 如何在 Javascript 函数中动态传递字符串

javascript - Angular/Node/Mongoose - 渲染帖子、评论、回复

css - Angularjs 列表元素边距问题将 ng-repeat 元素与静态元素相结合

html - jsfiddle 中的奇怪边距

javascript - Google Maps API JSFIDDLE 当我需要显示 5 个标记时显示一个标记

jquery - 使用滚动功能来动画切换元素