Question

尝试使用指令返回templateUrl html我做了同样的方式angularjs文档，但仍然给我一个简单的白页真正的工作，然后停止渲染templateUrl部分，我不知道我做错了什么

<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body ng-app="myform" ng-cloak>
<div layout="row" flex layout-align="center center">
    <div my-step1></div>
</div>
 <script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">     </script>
<script src="app.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-    material.min.js"></script>
 </body>
  </html>

的JavaScript（app.js）

var form = angular.module('myform', ['ngMaterial','ngAnimate','ngMessages', 'ngRoute']);
         form.directive('myStep1', function () {
          return {
               templateUrl: 'my-step1.html'
               };
            });

my-step1.html

<div><h1> ng directive works fine  </h1> </div>

Answer 1

<script>代码应位于<head>代码内，而不是<body>代码
angular- material.min.js
检查控制台，模块未正确加载;加载 angular.js 而不是angular。 min .js以获得有用的错误消息

Answer 2

我认为问题不在于您的指令，而在于引用脚本文件的顺序。现在

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

因为你的 myform 模块依赖于角度材质，所以你必须先引用它，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="app.js"></script>

在angular指令中使用templateUrl

2 个答案: