在 routeProvider 中找不到 AngularJS ng-template 指令答案

【问题标题】：AngularJS ng-template Directive Not Found in routeProvider在 routeProvider 中找不到 AngularJS ng-template 指令
【发布时间】：2013-05-06 22:05:16
【问题描述】：

我试图在ng-view 中包含多个要包含的部分模板，但routeProvider 指令总是试图从服务器获取文件（而不是嵌入的ng-template）。

我在我的 HTML 中定义了以下内容：

<script type="text/ng-template" id="groupList.html">
  <!-- contents -->
</script>

<script type="text/ng-template" id="participantList.html">
  <!-- contents -->
</script>

<script src="js/app.js"></script> <!-- AngularJS app file -->

在我的app.js 文件中，我有以下内容：

var myApp = angular.module('myApp', ['ngResource', '$strap.directives']);

// Update interpolateProvider for Django server
myApp.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

myApp.config(function ($routeProvider)
{
    $routeProvider.when('/', {
        templateUrl: '../static/views/home.html'
    });

    $routeProvider.when('/group', {
        controller: 'GroupCheckInCtrl',
        templateUrl: 'groupList.html'
    });

    $routeProvider.when('/group/:groupId', {
      controller: 'GroupCheckInCtrl',
      templateUrl: 'participantList.html'
    });

    $routeProvider.otherwise({
        redirectTo: '/'
    });
});

每当我加载页面时，我的浏览器控制台都会出现错误：

GET http://127.0.0.1:8000/visitorLog/group/groupList.html 404 (NOT FOUND)

我页面的 AngularJS 应用部分如下所示：

<div ng-app="myApp" ng-controller="GroupCheckInCtrl">
  <!-- other content -->

  <ng-view>Loading...</ng-view>

</div>

我错过了什么不允许 AngularJS 加载我的 ng-template 脚本指令？

【问题讨论】：

你定义了 ng-view 吗？
是的。我已经更新了我的问题以反映。

标签： angularjs angularjs-directive angularjs-routing

【解决方案1】：

确保内联脚本标签是具有 ng-app="myApp" 属性的元素的子元素。如果脚本标签在此元素之外，它将不起作用。解决此问题的最简单方法是将“ng-app='myApp'”添加到标签中。这是我的意思的一个例子：

<body ng-app="plunker" ng-controller="MainCtrl">
  <script type="text/ng-template" id="groupList.html">
    Group list html
  </script>

  <script type="text/ng-template" id="participantList.html">
    Participants list html
  </script>
  <ul>
    <li><a href="#/group">group</a></li>
    <li><a href="#/participant">participant</a></li>
  </ul>
  <div ng-view>
    Loading...
  </div>

</body>

这里是相关的插件：http://plnkr.co/edit/K1gMiLenRk0oPkzlGNjv

【讨论】：

正是问题所在。谢谢！