因此由于某种原因,我试图用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>

最佳答案

从索引中删除<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>

关于javascript - templateUrl在AngularJS中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48327104/

10-10 23:49