Angular应用找不到ng-template tpl.html文件

Question

I have a simple angular TabCtrl that loads different template files. 我有一个简单的有角度的TabCtrl ，可以加载不同的模板文件。 I include the template files themselves as such: 我将模板文件本身包括在内：

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

Inside the ng-app and on the same page as the TabCtrl . 在ng-app内部，与TabCtrl在同一页面上。 However, the templates are not loading on page load or when a tab is clicked. 但是，在页面加载或单击选项卡时不会加载模板。 I pretty much followed this JSFiddle exactly ( http://jsfiddle.net/eRGT8/162/ )... what am I doing wrong? 我几乎完全遵循了这个JSFiddle（ http://jsfiddle.net/eRGT8/162/ ）...我在做什么错？

If you can't help me without me posting more code, I'll do so. 如果您在没有我发布更多代码的情况下无法帮助我，我会这样做。

EDIT: More code 编辑：更多代码

<!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>

EDIT: JS File 编辑： 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;
  }
}]);

Answer 1

Your ng-include="activeTab" it's defined outside the scope of TabsCtrl in ng-controller="TabsCtrl" . 您的ng-include="activeTab"在ng-controller="TabsCtrl"的TabsCtrl范围之外定义。

Try to add it to the div id="wrapper" . 尝试将其添加到div id="wrapper" 。

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

The element 元素

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

needs to be inside the TabsCtrl, then they can communicate to each other. 需要放在 TabsCtrl 内部，则它们可以彼此通信。 https://docs.angularjs.org/guide/scope https://docs.angularjs.org/guide/scope

Another (but not so recommended way) is to add the variable to the $rootScope and pass it to the Controller. 另一种（但不建议这样做）是将变量添加到$ rootScope并将其传递给Controller。

For example: 例如：

myApp .controller('TabsCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
  ... $rootScope.activeTab = 'summary.tpl.html'; 

In this case, the activeTab will be available in the entire ng-app="myApp" scope. 在这种情况下， activeTab将在整个ng-app="myApp"范围内可用。

Angular应用找不到ng-template tpl.html文件

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-06-05 18:26:54

Angular应用找不到ng-template tpl.html文件

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-06-05 18:26:54

解决方案1
4 已采纳 2014-06-05 18:26:54