Issue:Loading multiple template through directive

Question

I have an issue while loading multiple template through directive Where i am passing some value to the controller scope and in directive i am checking for the value and relatively loading the html as well.

1st 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>

2nd 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 here is i am getting an error saying

angular.js:13708 Error: [$compile:tpload] Failed to load template: <ng-include src="getTemplateUrl()"/> (HTTP status: 404 Not Found)

i dont understand why i am getting this error here

any help is highly appreciated .

Answer 1

它不是templateUrl，

template: '<ng-include src="getTemplateUrl()"/>',

Answer 2

I think the problem in your Url, To resolve this error, ensure that the URL of the template is spelled correctly and resolves to correct absolute URL

Just try this

'../tpModule/views/stopWatchView.html'