Angular 指令不会出现

Question

在研究指令时，我总是遇到一些基本错误，因为我根本无法完成一项工作以从另一个 html 文件导入某些内容。

HTML (index.html)

<!DOCTYPE html>
<html ng-app="myapp">
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><script type="text/javascript" src="app.js"></script></head>
<body>

 <hello-world></hello-world>

</body></html>

HTML（ssth.html - 在与 index.html 相同的目录中）：

<h3>hello world</h3>

JavaScript（app.js - 同一目录）

(function(){
var app = angular.module('myapp', []);

app.directive('helloWorld', function() {
return {
    restrict: 'AE',
    replace: 'true',
    templateUrl: "ssth.html",
};
});
})();

但我的浏览器根本不会向我显示 hello word 消息。我知道我缺少一些基本的东西，但是什么？

来自 chrome 控制台的错误报告：

XMLHttpRequest cannot load file:///.../ssth.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///.../ssth.html'.
Error: [$compile:tpload] http://errors.angularjs.org/1.3.14/$compile/tpload?p0=ssth.html

Answer 1

您是否在 index.html 中添加了指令脚本？

<script src="{path}/helloWorld.js"></script>

Answer 2

请检查此 link：http://plnkr.co/edit/e3w54TZEmfj8h5O6BX7B?p=preview，

我在上面解决了你的问题 link。

我在index.html和

中添加了<hello-world></hello-world>

在 script.js 文件中，我添加

gitHubViewer.directive('helloWorld', function() {
return {
    restrict: 'AE',
    replace: 'true',
    templateUrl: "ssth.html",
};
});

请审核。

Answer 3

您应该在某个服务器上托管您的代码，以便可以访问模板，因为要加载指令的模板 url 应该具有 //http 协议。

使用//file协议会怎样？

在通过 angular 获取模板时，它使用 $templateRequest 获取模板，& $templateRequest API 使用 $http 方法获取模板，并且如果您使用 //file 协议进行任何 ajax 调用无论如何都会失败。因此，通过将您的代码文件夹托管在某些服务器（如 WAMP、IIS 等）上将解决您的问题。

解决方法（如果您在没有托管代码的情况下修复它）

其他可能的快速解决方案是使用 template 选项而不是像 template: "<h3>hello world</h3>" 那样的 templateUrl 但这不是解决问题的更好方法。 :)

Angular 指令不会出现

Angular Directive won't show up

javascript

html

angularjs

angularjs-directive

directive