Issue
I'm trying to create a jsfiddle which uses AngularJS to show two calendar controls:
http://jsfiddle.net/edwardtanguay/pe4sfex6/10/
My code works locally.
I've copied everything up to jsfiddle, but it seems that my method of including the template code via a script tag isn't working:
<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>
I did it this way, of course, because I can't access a file on jsfiddle, or is there a way to do this on jsfiddle:
templateUrl: "templates/calendarTemplate.html",
If not, how can I get jsfiddle to process the text/ng-template script the way it does locally?
Solution
Try this:
- select "no wrap - in
<head>" under Frameworks & Extensions - add the body tag
<body ng-app="demo">under Fiddle Options
Here's the updated Jsfiddle
Explanation
In your JSfiddle the option onDomReady is selected, this means that the Javascript code gets wrapped in an onDomReady window event (see frameworks and extensions in the JSfiddle documentation). In order to allow AngularJS to see the app before the DOM is fully loaded, select a "no wrap" option (in <head> or in <body>).
Next you need is to change the body tag in the JSfiddle options. This is because the directive ng-app used to auto-bootstrap an AngularJS application
is typically placed near the root element of the page - e.g. on the
<body>or<html>tags
Answered By - user2314737
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.