在angular指令中使用templateUrl

Question

嘗試使用指令返回templateUrl html，我以相同的方式獲取angularjs文檔，但仍然在簡單的工作點上給了我一個純白的頁面，然后停止了render 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。 最小 .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 個解決方案

解決方案1
0 2015-12-29 19:26:34

解決方案2
0 2015-12-29 20:15:15

在angular指令中使用templateUrl

問題描述

2 個解決方案

解決方案1 0 2015-12-29 19:26:34

解決方案2 0 2015-12-29 20:15:15

解決方案1
0 2015-12-29 19:26:34

解決方案2
0 2015-12-29 20:15:15