Question

通过指令加载多个模板时遇到问题我将一些值传递给控制器作用域并在指令中我正在检查值并相对加载html。

第一个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>

第二个HTML：

<div stop-watch template="candidate-view" name="candidateInfo.name" time-of-interview="candidateInfo.dateOfInterview" class="stop-watch"></div>

指令：

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';
                }
            }
        }
    };
});

这里的问题是我收到错误

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

我不明白为什么我在这里收到此错误

任何帮助都非常感谢。

Answer 1

它不是templateUrl，

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

Answer 2

我认为您的网址中的问题，要解决此错误，请确保模板的网址拼写正确并解析为正确的绝对网址

试试这个

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

问题：通过指令加载多个模板

2 个答案: