Angular應用程序無法找到ng-template tpl.html文件

我有一個簡單的角度TabCtrl，它載入不同的模板文件。包括我的模板文件本身是這樣的：Angular應用程序無法找到ng-template tpl.html文件

<script type="text/ng-template" id="summary.tpl.html"> 
    // Actual template elements 
</script>

裏面ng-app和同一頁TabCtrl上。但是，模板在加載頁面或單擊選項卡時不加載。我幾乎完全按照這個JSFiddle（http://jsfiddle.net/eRGT8/162/）......我做錯了什麼？

如果沒有我發佈更多的代碼，你不能幫助我，我會這樣做。

編輯：更多的代碼

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="sidebar-wrapper"> 
    <div class="logo"> 
    </div> 
    <ul class="sidebar-nav" ng-controller="TabsCtrl"> 
     <li ng-repeat="tab in tabs" 
      ng-class="{active_tab:isActiveTab(tab.url)}" 
      ng-click="onClickTab(tab)"> 
     <a href="#"> 
      <div class="tab-icon"> 
      <i ng-class="tab.icon"></i> 
      </div> 
      <div class="tab-label">{{tab.label}}</div> 
     </a> 
     </li> 
    </ul> 
    </div> 
    <div id="page-content-wrapper"> 
    <div class="page-content"> 
     <div class="dashboard" ng-include="activeTab"></div> 
     <script type="text/ng-template" id="summary.tpl.html"> 
     HI 
     </script> 
     <script type="text/ng-template" id="downloads.tpl.html"> 

     </script> 
     <script type="text/ng-template" id="ads.tpl.html"> 

     </script> 
     <script type="text/ng-template" id="landing.tpl.html"> 

     </script> 
     <script type="text/ng-template" id="retargeted.tpl.html"> 

     </script> 
    </div> 
    </div> 
</div> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="lib/angular/angular.js"></script> 
<script src="lib/angular/angular-route.js"></script> 
<script src="lib/ui-bootstrap.js"></script> 
<script src="js/routes.js"></script> 
<script src="js/services.js"></script> 
<script src="js/controllers.js"></script> 
<script src="js/filters.js"></script> 
<script src="js/directives.js"></script> 

</body> 
</html>

編輯： JS文件

myApp.controller('TabsCtrl', ['$scope', function ($scope) { 
    $scope.tabs = [{ 
     label: 'one', 
     icon: 'one', 
     url: 'summary.tpl.html' 
    }, { 
     label: 'two', 
     icon: 'two', 
     url: 'downloads.tpl.html' 
    }, { 
     label: 'three', 
     icon: 'three', 
     url: 'ads.tpl.html' 
    }, { 
     label: 'four', 
     icon: 'four', 
     url: 'landing.tpl.html' 
    }, { 
     label: 'five', 
     icon: 'five', 
     url: 'retargeted.tpl.html' 
    }]; 

    $scope.activeTab = 'summary.tpl.html'; 

    $scope.onClickTab = function(tab) { 
    $scope.activeTab = tab.url; 
    } 

    $scope.isActiveTab = function(tabUrl) { 
    return tabUrl == $scope.activeTab; 
    } 
}]);

來源

2014-06-05 sir_thursday

你的jsfiddle適合我。 – pixelbits

我知道，JSFiddle的效果很好。我將它複製到我自己的網站上，非常適合線路，並且不會加載模板。 –

看起來我們需要你發佈更多的代碼。 – dmullings

你ng-include="activeTab"它的TabsCtrl在ng-controller="TabsCtrl"範圍之外定義。

嘗試將其添加到div id="wrapper"。

<div id="wrapper" ng-controller="TabsCtrl">

元件

<div class="dashboard" ng-include="activeTab">

需要是內部的TabsCtrl，那麼他們可以彼此通信。 https://docs.angularjs.org/guide/scope

另一個（但不那麼推薦的方式）是將變量添加到$ rootScope，並把它傳遞給控制器。

例如：

myApp .controller('TabsCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
 ... 

     $rootScope.activeTab = 'summary.tpl.html'; 

在這種情況下，將activeTab在整個ng-app="myApp"範圍是可用的。

來源

2014-06-05 18:26:54 Guilherme

+1的詳細答案，並保持改善您的答案，即使它被接受。我真的很喜歡那樣。 –

謝謝，我也喜歡，因爲幫助我防止這個簡單的問題，使我們失去了幾個小時找到它.. – Guilherme

Angular應用程序無法找到ng-template tpl.html文件

回答

相關問題