角度指令未加载模板，静态应用程序（无服务器）
[英]angular directive is not loading template, static app ( no server )
问题描述
I am teaching myself Angular and am making a little static app with localStorage. 
我正在自学Angular，并使用localStorage制作了一个静态应用程序。 I have hit a snag when though when trying to get a template to load through a directive. 当试图通过指令加载模板时，我遇到了麻烦。 I am still pretty new to this, and would appreciate any feedback. 我对此还很陌生，希望得到您的反馈。 I am spent some time looking through answers to previous questions but none which have addressed my issue. 我花了一些时间寻找以前问题的答案，但没有一个解决了我的问题。
I am not getting any errors and when I check in dev tools the file is not loading at all. 我没有收到任何错误，当我检入开发工具时，文件根本没有加载。 I have tried different template: and templateUrl configurations and none have worked. 我尝试了不同的template：和templateUrl配置，但没有一个起作用。
Here is my directive code: 这是我的指令代码：
angular.module('dropForm', [])
.directive('dropForm', function(){
return{
restrict:'E',
replace:true,
templateUrl:'drop-form.html',
link: function(scope, elem, attr){
var dropButton = angular.element(document.querySelector('#dropButton'));
}
}
});
My file structure is basic, this is just a static app. 我的文件结构是基本的，这只是一个静态应用程序。 I have a index.html and in that same directory is drop-form.html. 我有一个index.html，并且在同一目录中是drop-form.html。 My js files and linked in via script tags in the index.html 我的js文件并通过index.html中的脚本标签链接
Here is my where I call the directive in index.html: 这是我在index.html中调用指令的地方：
<body ng-controller = "mainController">
<div drop-form> </div>
<div class = "container main">
<h1 ng-bind="$storage.toDos.length || 'All Done!'"></h1>
<div ng-repeat = "todo in $storage.toDos">
<div style = "" class = "todo-item">
<div>
<h5 ng-bind = "todo.text"></h5>
</div>
<i class="fa fa-trash" ng-click="destroyTodo(todo)"></i>
</div>
</div>
</div>
</body>
</html>
The directive template is not loading at all, but I have no erros, please help me understand what i misunderstand here. 指令模板根本没有加载，但是我没有错误，请帮助我了解我在这里误解的地方。 Thank you!! 谢谢！！
2 个解决方案
解决方案1
1 2015-10-28 07:05:22
First you have missed your ng-app with name in your case dropForm(in my example I set it to 'myApp') and add it to your body element 首先，您错过了名称为dropForm的ng-app （在我的示例中，我将其设置为“ myApp”）并将其添加到body元素中
<body ng-app="myApp" ng-controller = "mainController">
<div drop-form> </div>
<div class = "container main">
<h1 ng-bind="$storage.toDos.length || 'All Done!'"></h1>
<div ng-repeat = "todo in $storage.toDos">
<div style = "" class = "todo-item">
<div>
<h5 ng-bind = "todo.text"></h5>
</div>
<i class="fa fa-trash" ng-click="destroyTodo(todo)"></i>
</div>
</div>
</div>
</body>
</html>
Second.In your directive you have used restriction 'E' .It means that you must use it only as Element : <drop-form></drop-form> ( 'E' stand for Element), but you have used as attr.If you want to work with <div drop-form> </div> , you must add also restriction 'A' , restrict:**'AE'** or remake <div drop-form> </div> to <drop-form></drop-form> 其次，在指令中您使用了限制'E' ，这意味着您只能将其用作Element ： <drop-form></drop-form> （ 'E'代表Element），但您已将其用作attr如果要使用<div drop-form> </div> ，则还必须添加限制'A' ， restrict:**'AE'**或将<div drop-form> </div>为<drop-form></drop-form>
and this will be your code 这将是您的代码
angular.module('myApp', [])
.directive('dropForm', function(){
return{
restrict:'AE',
replace:true,
templateUrl:'drop-form.html',
link: function(scope, elem, attr){
var dropButton = angular.element(document.querySelector('#dropButton'));
}
}
});
解决方案2
1 2019-01-08 13:49:59
除非您在服务器上运行应用程序，否则不会从URL加载模板。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.