問題：多個模板無法加載

Question

我有一個問題，當通過指令加載多個模板在哪裏我傳遞一些值到控制器範圍和指令我檢查的價值和相對加載的HTML以及。

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

       } 
      }) 
     }