Question

因此，出于某种原因，我试图加载templateUrl的HTML页面没有显示出来。这些文件都在同一个目录中，控制台没有显示错误，它只是没有加载我试图添加的页面元素。我的指令很简单：

.directive('tagTeste',function(){
    return{
        templateUrl: 'templateUrl.html'
    };
});

我的模板html我试图加载：

<!doctype html>
<html ng-app="teste">
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<table border="1" width="500" height="150">
   <thead>
      <tr>
         <td>Nome</td>
         <td>Telefone</td>
      </tr>
    </thead>
    <tbody>
        <tr ng-repeat="pessoa in pessoas">
          <td>{{pessoa.nome}}</td>
          <td>{{pessoa.telefone}}</td>
        </tr>
    </tbody>
</table>
<form>
  <p> Nome: <input type="text" ng-model="nomenovo" required> </p>
  <p> Telefone: <input type="number" ng-model="numeronovo" required> </p>
  <input type="button" ng-click="add()">
</form>
<body>
</html>

我的索引页：

<!doctype html>
<html ng-app="teste">
  <head>
    <h1 align="center">Table teste</h1>
  <meta charset="utf-8">
  <title>Teste</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="repeaterdirective.js"></script>
  <script type="text/ng-template" id="templateUrl.html">
  </head>
  <div ng-controller="index" align="center">
  <body>
    <div tag-teste></div>
  </body>
  </div>
</html>

Answer 1

从索引中删除<script type="text/ng-template" id="templateUrl.html">。

然后清楚一点templateUrl.html。标记为<html>和<body>的标记已包含在索引中。

看看plunker。

评论后更新：

将索引更改为：

<!doctype html>
<html ng-app="teste">
  <head>

  <meta charset="utf-8">
  <title>Teste</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="index" align="center">
      <h1 align="center">Table teste</h1>
      <div tag-teste></div>
    </div>
  </body>

</html>

Answer 2

如果您使用templateUrl协议在Chrome浏览器中加载文件时使用file:///，则始终会收到此错误。

另一方面，Mozilla Firefox将允许它，Microsoft Edge也是如此。

另一种解决方案是从HTTP服务器为您的页面提供服务。

一个易于使用的是http-server。

templateUrl在AngularJS中不起作用

2 个答案: