Question

我有一个简单的角度TabCtrl，可以加载不同的模板文件。我这样包含模板文件：

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

Answer 1

ng-include="activeTab" TabsCtrl的{{1}}范围超出了ng-controller="TabsCtrl"的{{1}}范围。

尝试将其添加到div id="wrapper"。

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

元素

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

需要内部 TabsCtrl，然后他们可以相互通信。 https://docs.angularjs.org/guide/scope

另一种（但不是那么推荐的方法）是将变量添加到 $ rootScope 并将其传递给Controller。

例如：

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

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

在这种情况下，activeTab将在整个ng-app="myApp"范围内提供。

Angular app无法找到ng-template tpl.html文件

1 个答案: