I created a directive that loads a template containing several input fields, one of which includes a jQuery/Bootstrap datepicker.
<my-directive-buttons></my-directive-buttons>
When the user clicks on the datepicker field, the calendar pops up. I also added an ng-click event to the input field:
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group datepick'>
<input type='text' class="form-control" ng-click="addCalendarFooter()"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Upon clicking, the calendar appears and calls $scope.addCalendarFooter:
app.directive('myDrectiveButtons', function($compile) {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
},
templateUrl: 'controls/input-fields.html',
link: function(scope, elem, attrs) {
},
controller: function($scope) {
$scope.addCalendarFooter = function() {
$('#datepicker').append($('<div></div>').load('myDir/calendar/customFooter.html'));
}
}
}
});
Although I successfully append the contents of customFooter.html to the calendar, any further ng-click events within customFooter.html do not get triggered. For example:
customFooter.html
<div>
<button ng-click="controlClick()">Click Me</button>
</div>
If I move this button outside of customFooter.html into input-field.html to test the logic, the click event works.
I attempted using $scope.$apply and $scope.digest after the .append, but received a "digest already in progress error."
UPDATE:
Following suggestions from comments below, I removed jQuery and tried an "angular way" solution:
$scope.addCalendarFooter = function() {
var html = "<div ng-include src=\"myDir/calendar/customFooter.html\"><\div>";
var myEl = angular.element(document.getElementsByClassName('datepicker');
myEl.html(html);
$compile(myEl)($scope)
}
The above code inserts my .html template via ng-include, but it replaces the contents of the datepicker instead of inserting at the bottom. I also tried using .append without success.