AngularJS Directive Issue retrieving template from templateUrl

Question

I'm new to creating directives in angular, and I'm kind of stuck here, I want to create a basic mini calendar directive to select a date in a given month. I'm still getting error from the template when it's requested. Any help? Thanks

 function calendarController($scope) { $scope.config = new Date(2000, 0, 1); } angular.module("calendar", []).directive('miniCalendar', function($parse) { return { restrict: "E", replace: true, templateUrl: "../views/template.html", transclude: true, controller: mCalBinding, compile: function(element, attrs) { debugger; var modelAccessor = $parse(attrs.ngModel); return function(scope, element, attrs, controller) { var processChange = function() { // var date = new Date(element.datepicker("getDate")); scope.$apply(function(scope) { // Change bound variable debugger; modelAccessor.assign(scope, date); }); }; element.datepicker({ inline: true, onClose: processChange, onSelect: processChange }); // scope.$watch(modelAccessor, function(val) { // return true; // }); }; } }; }); function mCalBinding($scope) { //Binding of the directive $scope.currentDate = new Date(2000, 0, 1); $scope.prev = function(data) { }; $scope.next = function(data) { }; $scope.currentMonth = 'December'; $scope.currentYear = '2679'; $scope.days = [{ day: "1" }, { day: "2" }, { day: "3" }, { day: "4" }, { day: "5" }, { day: "6" }, { day: "7" }, { day: "8" }, { day: "9" }, { day: "10" }, { day: "11" }, { day: "12" }, { day: "13" }]; $scope.weeks = [{ week: "1", days: [{ day: "1" }, { day: "2" }, { day: "3" }, { day: "4" }, { day: "5" }, { day: "6" }, { day: "7" }, { day: "8" }, { day: "9" }, { day: "10" }, { day: "11" }, { day: "12" }, { day: "13" }] }, { week: "2", days: [{ day: "1" }, { day: "2" }, { day: "3" }, { day: "4" }, { day: "5" }, { day: "6" }, { day: "7" }, { day: "8" }, { day: "9" }, { day: "10" }, { day: "11" }, { day: "12" }, { day: "13" }] }, { week: "3", days: [{ day: "1" }, { day: "2" }, { day: "3" }, { day: "4" }, { day: "5" }, { day: "6" }, { day: "7" }, { day: "8" }, { day: "9" }, { day: "10" }, { day: "11" }, { day: "12" }, { day: "13" }] }, { week: "4", days: [{ day: "1" }, { day: "2" }, { day: "3" }, { day: "4" }, { day: "5" }, { day: "6" }, { day: "7" }, { day: "8" }, { day: "9" }, { day: "10" }, { day: "11" }, { day: "12" }, { day: "13" }] }]; } /* Fragment End - directive */ 

HTML:

<div ng-app="calendar" ng-controller="calendarController" class="ng-scope">
    <mini-calendar type="text" ng-model="config" /> </div>

and the template:

<input type="text" ng-bind="currentDate">
<div >
    <div >
        <a>
            <span ng-click="prev">Prev</span>
        </a>
        <a>
            <span ng-click="next">Next</span>
        </a>
        <div >
            <span ng-bind="currentMonth">January</span>&nbsp;
            <span ng-bind="currentYear">2000</span>
        </div>
    </div>
    <table>
        <thead>
            <tr>
                <th ng-repeat="day in days">
                    <span ng-bind="day"></span>
                </th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="week in weeks">
            <td ng-repeat="day in days">
                <a ng-bind="day" ng-click="selectDate">1</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

Answer 1

You probably get this error https://docs.angularjs.org/error/$compile/tplrt/

When a directive is declared with template (or templateUrl) and replace mode on, the template must have exactly one root element. That is, the text of the template property or the content referenced by the templateUrl must be contained within a single html element.

For example, <p>blah <em>blah</em> blah</p> instead of simply blah <em>blah</em> blah. Otherwise, the replacement operation would result in a single element (the directive) being replaced with multiple elements or nodes, which is unsupported and not commonly needed in practice.

What I recommend is to avoid using the replace flag at all.

It is now (1.3.x) deprecated and will be removed in the next major version anyway: https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb