AngularJS指令模板Url

我对AngularJS质疑，但没有发生工作。我创建了一个使用该指令的代码。但是，当您使用templateUrl时，它不会执行我们想要执行的操作。在我的代码中，我假设标签被header.html的内容替换。但是，你不能。请借你的智慧。AngularJS指令模板Url

sample.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> 
<script type="text/javascript"> 
var directiveApp = angular.module('dApp', []); 
directiveApp.directive('header', [function() { 
    return { 
     restrict: 'E', 
     templateUrl: "header.html", 
    }; 
}]); 
</script> 

<body ng-app="dApp"> 
    <header></header> 
</body>

了header.html

<label>Hello!</label>

来源

2014-11-04 village

如果问题是如何使模板替换''

标签只使用'取代：成立，'在指令http://plnkr.co/edit/JtaCkcp8K5D1rTgKk57S?p=preview – charlietfl 2014-11-04 02:24:15

我想你的方式。但是，错误：[$ compile：tpload] http：？ //errors.angularjs.org/1.3.1/$compile/tpload P0 = header.html'发生。 – village 2014-11-04 04:11:33

我确定使用IE11进行操作。在那种情况下，似乎这个错误在本地发生。源代码存储在Web服务器中，访问时似乎没有问题。或者没有那些知道如何作为本地文件运行的人？ – village 2014-11-04 04:58:40

随着templateUrl的指令，角度会发送一个HTTP请求来检索您的服务器端这个网站。所以你应该确保在正确的url中有这样的'header.html'文件。

但是，如果你不想用ajax加载这个模板。然后你可以使用角度模板。

添加到您的sample.html：

<script type="text/ng-template" id="header.html"> 
    <label>Hello!</label> 
</script>

希望这对你的工作。

来源

2014-11-04 03:16:08

AngularJS指令模板Url

回答

相关问题