Question

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

第一个html：

<a class="col-xs-3" > <div stop-watch template-url="topic-view" name="oCandidateDetails.name" time-of-interview="oCandidateDetails.doi" class="stop-watch"></div> </a>

第二个HTML：

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

指令：

angular.module('iSourcingApp.tpModule')
.directive('stopWatch', function() {
    return {
        restrict: 'A',
        template: '<ng-include src="getTemplateUrl()"/>',
        replace: false,
        scope: {
            name: "=",
            templateUrl: "=",
            timeOfInterview: "="
        },
        controller: function($scope, $interval) {
            $scope.getTemplateUrl = function() {
                debugger;
                //basic handling
                if ($scope.templateUrl == 'candidate-view') {
                    return './tpModule/views/stopWatchView.html';
                }
                if ($scope.templateUrl == 'topic-view') {
                    return './tpModule/views/topicStopWatchView.html';
                }
            }
            $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.template-url的值时，我得到0

我不明白这个问题

非常感谢任何帮助

Answer 1

您可以尝试观看$scope.templateUrl进行更改。

        $scope.getTemplateUrl = function() {
            $scope.$watch('templateUrl', function(oldVal, newVal){
                if(newVal){
                    if ($scope.templateUrl == 'candidate-view') {
                        return './tpModule/views/stopWatchView.html';
                    }
                    if ($scope.templateUrl == 'topic-view') {
                        return './tpModule/views/topicStopWatchView.html';
                    }

                }
            })
        }

问题：多个模板未加载

1 个答案: