所以由于某种原因，我试图加载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>So for some reason the HTML page i'm trying to load with templateUrl is not showing up. The files are all in the same directory, console shows no error, it just doesn't load the page elements i'm trying to add. My directive is as simple as:
.directive('tagTeste',function(){ return{ templateUrl: 'templateUrl.html' }; });My template html i'm trying to load:
<!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>My index page:
<!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>Remove <script type="text/ng-template" id="templateUrl.html"> from index.
And clear a bit templateUrl.html. Tags as <html> and <body> are already contained in index.
Take a look at plunker.
Updated after comment:
Change index as:
<!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>更多推荐
发布评论