在angular指令中使用templateUrl

using templateUrl inside angular directive

本文关键字：templateUrl angular 指令      更新时间：2023-09-26

尝试使用指令返回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>

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

<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>
  • <script>标签应该在<head>标签内，而不是在<body>标签内
  • angular- material.min.js中有一个空格
  • 检查控制台，模块未正确加载；加载angular.js而不是angularmin.js以获得有用的错误消息
相关文章：