Question

我正在教自己Angular并且正在使用localStorage制作一个静态应用程序。当尝试通过指令加载模板时，我遇到了麻烦。我对此仍然很陌生，并希望得到任何反馈。我花了一些时间查看以前问题的答案，但没有解决我的问题。

我没有收到任何错误，当我检查开发工具时，文件根本没有加载。我尝试了不同的模板：和templateUrl配置，但没有一个工作。

这是我的指令代码：

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'));
    }
  }
});

我的文件结构是基本的，这只是一个静态的应用程序。我有一个index.html，在同一个目录中是drop-form.html。我的js文件并通过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>

指令模板根本没有加载，但我没有错误，请帮助我理解我在这里误解了什么。谢谢!!

Answer 1

首先，您在案例中丢失了ng-app名称为dropForm（在我的示例中，我将其设置为'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>

第二。在您的指令中，您使用了限制'E'。这意味着您必须仅使用作为元素：<drop-form></drop-form>（ 'E'代表Element），但您已将其用作attr。如果您想使用<div drop-form> </div>，则还必须添加限制'A'，{{1或者重新restrict:**'AE'**到<div drop-form> </div>

这将是您的代码

<drop-form></drop-form>

Answer 2

除非您在服务器上运行应用，否则不会从URL加载模板。

angular指令不加载模板，静态app（没有服务器）

2 个答案: