Question

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

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

Answer 1

你的指令适用于我：

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

app.js：

var app = angular.module('myApp', []);

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

myCallout.html：

<div>myCallout.html</div>

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

在指令中使用templateUrl冻结应用程序

1 个答案: