javascript - AngularJS Directive Issue retrieving template from templateUrl -
i'm new creating directives in angular, , i'm kind of stuck here, want create basic mini calendar directive select date in given month. i'm still getting error template when it's requested. 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 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 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> <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>
you error https://docs.angularjs.org/error/$compile/tplrt/
when directive declared template (or templateurl) , replace mode on, template must have 1 root element. is, text of template property or content referenced templateurl must contained within single html element.
for example,
<p>blah <em>blah</em> blah</p>
instead of blah<em>blah</em>
blah. otherwise, replacement operation result in single element (the directive) being replaced multiple elements or nodes, unsupported , not commonly needed in practice.
what recommend avoid using replace
flag @ all.
it (1.3.x) deprecated , removed in next major version anyway: https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb
Comments
Post a Comment