在指令中使用模板网址会冻结应用程序

Using templateUrl in directive freezes app

本文关键字：冻结 应用程序 指令      更新时间：2023-09-26

我有一个MEANstack应用程序，它的行为非常奇怪。使用 templateUrl 创建指令会冻结应用程序。相同的指令仅使用带有模板的 html 代码。

仪表板.html：

 <h3>Recent</h3>
 <div my-callout></div>

dashboard.controller.js：

.directive('myCallout', function(){
    return {
    templateUrl:'myCallout.html'
};
})

myCallout.html：

<div>
    <p>fdsfs</p>
</div>

这有效：

.directive('myCallout', function(){
    return {
    template:' <p> mhgfhut </p>'
    };
})

;

你的指令对我来说很好用：

~/angular_js_projects/9app$ tree
.
├── app.css
├── app.js
├── bootstrap
      <snip>
├── index.html
└── myCallout.html

应用.js：

var app = angular.module('myApp', []);
app.directive('myCallout', function() {
  return {
    templateUrl: 'myCallout.html'
  }
});

myCallout.html：

<div>myCallout.html</div>

索引.html：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
  <title>AngularJS</title>
  <meta charset="UTF-8">  <!-- For html5 (default is UTF-8) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- For Bootstrap -->
  <!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
<body>
  <h3>Recent</h3>
  <div my-callout></div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>

使用此目录结构：

~/angular_js_projects/9app$ tree
.
├── app.css
├── app.js
├── bootstrap
      <snip>
├── index.html
└── templates
    └── myCallout.html

然后 app.js 看起来像这样：

var app = angular.module('myApp', []);
app.directive('myCallout', function() {
  return {
    templateUrl: 'templates/myCallout.html'
  }
});
相关文章：