When using my AngularJS application, I display a modal window for editing an event and adding/removing event dates (utilizing Bootstrap datepicker and timepicker).
The event already has some fixed dates, which is not an issue since I have them created and assigned to the ng-model of the datepicker & timepicker.
However, the problem arises when a user clicks the add button to dynamically add new event dates, as I do not have a date variable to assign to the ng-model of the datepicker.
To address this issue, here's what I do:
Within the
, I handle the modal window (edit event). Here, I have an empty object that I use to add new event dates to the directive.controller('ModalEditEventP4ctrl',..addNewDate.$scope.datesObj = {}The "add new eventdate" button is a directive where I pass a dates array object from the controller. Inside the directive, I create new date objects, push them into the array, and then assign them to the HTML template:
.directive('addNewDate', function($compile){ return { restrict: 'AE', scope: { onClick: '&', dyndatesObj: '=' }, link: function (scope, element, attrs) { element.bind('click', function () { /*1. here I create a new date object and push it into the array */ scope.dyndatesObj.push({dynDateStart:new Date(),dynDateEnd:new Date(),dtStatus:'1'}); /*2. get the last item */ var items = $(".row.basicDates").length-1; /*3. compile another directive 'newDateBlock'*/ /* and pass it into the DOM*/ /* the directive is compiled but the datepickers are empty*/ $('.row.basicDates:eq('+items+')').append($compile("<new-date-block />")(scope)); scope.$apply(); }); } } })The directive
newDateBlockcontains the DOM elements which are then compiled through the above directive:.directive('newDateBlock', function(){ return { restrict: 'AE', scope: { onClick: '&', myDate:'=' }, templateUrl: 'assets/modules/part4/templates/addNewDate.tpl.html', link: function (scope, element, attrs) { element.bind('click', function () { console.log('inside directive'); }); } } });The template file addNewDate.tpl.html (not shown entirely). Everything works fine, except for the datepickers. Even though I assign ng-model= datesObj[datesObj.length-1][dynDateStart], they appear empty:
<div class="row" > <div class="col-md-6"> <div class="row"> <div class="col-md-4" style="padding-left: 0;"> <label>Start Date</label> <label>Start Time</label> </div> <div class="col-md-8" style="padding-left: 0;"> <p class="input-group"> <input type="text" class="form-control" style="width:100px" datepicker-popup="{{format}}" /*ng-model does not seem to work*/ ng-model="datesObj[datesObj.length-1][dynDateStart]" is-open="" datepicker-options="dateOptions" ng-required="true" close-text="Close"/> <span class="input-group-btn" style="float:left"> <button type="button" class="btn btn-default" ng-click=""> <i class="glyphicon glyphicon-calendar"></i> </button> </span> </p> <timepicker ng-model="" ng-change="changed()" hour-step="1" minute-step="10" show-meridian="false"></timepicker> </div> </div>
https://i.sstatic.net/101fh.png It appears that the value within the ng-model is not being compiled. I'm unsure of the exact cause of the problem. Any assistance would be greatly appreciated.
To be more specific, I'm seeing an error in the browser that states:
TypeError: Cannot read property 'initDate' of undefined
at link (http://.../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js:8:23435)
at http://.../bower_components/angular/angular.min.js:70:141
at $ (http://.../bower_components/angular/angular.min.js:70:197)
at B (http://.../bower_components/angular/angular.min.js:59:255)
at g (http://.../bower_components/angular/angular.min.js:51:335)
at g (http://.../bower_components/angular/angular.min.js:51:352)
at g (http:/.../bower_components/angular/angular.min.js:51:352)
at g (http://.../bower_components/angular/angular.min.js:51:352)
at g (http://.../bower_components/angular/angular.min.js:51:352)
at g (http://.../bower_components/angular/angular.min.js:51:352) <input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope" style="width:100px" datepicker-popup="{{format}}" ng-model="datesObj[0].dynDateStart" is-open="" datepicker-options="dateOptions" ng-required="true" close-text="Close">