I am facing a problem with loading multiple templates through a directive. In this scenario, I pass some values to the controller scope and within the directive, I check for these values to load the corresponding HTML template.
First HTML:
<a class="col-xs-3" > <div stop-watch template="topic-view" name="oCandidateDetails.name" time-of-interview="oCandidateDetails.doi" class="stop-watch"></div> </a>
Second HTML:
<div stop-watch template="candidate-view" name="candidateInfo.name" time-of-interview="candidateInfo.dateOfInterview" class="stop-watch"></div>
Directive:
angular.module('iSourcingApp.tpModule')
.directive('stopWatch', function() {debugger
return {
restrict: 'A',
templateUrl: '<ng-include src="getTemplateUrl()"/>',
replace: false,
scope: {
name: "=",
timeOfInterview: "=",
template:"="
},
controller: function($scope, $interval) {debugger
$scope.getTimeRemaining = function(endtime) {
$scope.t[$scope.name].total = Date.parse(endtime) - Date.parse(new Date());
$scope.t[$scope.name].seconds = Math.floor(($scope.t[$scope.name].total / 1000) % 60);
$scope.t[$scope.name].minutes = Math.floor(($scope.t[$scope.name].total / 1000 / 60) % 60);
$scope.t[$scope.name].hours = Math.floor(($scope.t[$scope.name].total / (1000 * 60 * 60)) % 24);
$scope.t[$scope.name].days = Math.floor($scope.t[$scope.name].total / (1000 * 60 * 60 * 24));
}
$scope.initializeClock = function(endtime) {
$scope.t = {};
$scope.t[$scope.name] = {};
$scope.updateClock = function() {
$scope.getTimeRemaining(endtime);
$scope.t[$scope.name].hours = ('0' + $scope.t[$scope.name].hours).slice(-2);
$scope.t[$scope.name].minutes = ('0' + $scope.t[$scope.name].minutes).slice(-2);
$scope.t[$scope.name].seconds = ('0' + $scope.t[$scope.name].seconds).slice(-2);
if ($scope.t[$scope.name].total <= 0) {
clearInterval($scope.timeinterval);
}
}
$scope.updateClock();
$scope.timeinterval = $interval($scope.updateClock, 1000);
}
$scope.initializeClock($scope.timeOfInterview);
//function used on the ng-include to resolve the template
$scope.getTemplateUrl = function() {debugger;
//basic handling
if ($scope.template == 'candidate-view') {
return './tpModule/views/stopWatchView.html';
}
if ($scope.template == 'topic-view') {
return './tpModule/views/topicStopWatchView.html';
}
}
}
};
});
The issue I am encountering is an error that states:
angular.js:13708 Error: [$compile:tpload] Failed to load template: <ng-include src="getTemplateUrl()"/> (HTTP status: 404 Not Found)
I cannot seem to figure out why this error is occurring.
Any assistance would be greatly appreciated.