我不能创建和使用 AngularJS 指令答案

【问题标题】：I cant' create and use AngularJS directive我不能创建和使用 AngularJS 指令
【发布时间】：2016-10-27 00:52:00
【问题描述】：

我有一些问题需要使用 AngularJS 指令，但是当我创建它们时，我的 NetBeans 会强调我的新指令并显示错误。这就是我所拥有的 HTML：

<!DOCTYPE html>
<html ng-app="mainModule">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="angular.min1.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body ng-controller="mainCtrl">
        {{a}}
        <div><random></random>
        </div>
    </body>
</html>

JavaScript(app.js)

(function(){
var app = angular.module("mainModule", []);
app.controller("mainCtrl", function($scope){
                    $scope.a = "hi";
     });
    app.directive("random", function(){
        console.log("directive");            
        return {
            restrict:"E",
            templateUrl:"random.html"
        };
    });
})();

console.log("指令")

directive
angular.min1.js:79 XMLHttpRequest cannot load file:///random.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.min1.js:79s @ angular.min1.js:74f @ angular.min1.js:72K @ angular.min1.js:102K @ angular.min1.js:102(anonymous function) @ angular.min1.js:103$eval @ angular.min1.js:114$digest @ angular.min1.js:111$apply @ angular.min1.js:114(anonymous function) @ angular.min1.js:18d @ angular.min1.js:35c @ angular.min1.js:18cc @ angular.min1.js:18Xc @ angular.min1.js:17(anonymous function) @ angular.min1.js:217a @ angular.min1.js:146(anonymous function) @ angular.min1.js:31r @ angular.min1.js:7c @ angular.min1.js:31
angular.min1.js:93 Error: [$compile:tpload] http://errors.angularjs.org/1.2.29/$compile/tpload?p0=%2Frandom.html
    at Error (native)
    at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:6:450
    at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:61:425
    at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:73:70
    at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167)
    at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167)
    at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167)
    at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:103:428
    at h.$eval (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:114:32)
    at h.$digest (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:111:117)(anonymous function) @ angular.min1.js:93(anonymous function) @ angular.min1.js:68w @ angular.min1.js:102w @ angular.min1.js:102w @ angular.min1.js:102(anonymous function) @ angular.min1.js:103$eval @ angular.min1.js:114$digest @ angular.min1.js:111$apply @ angular.min1.js:114(anonymous function) @ angular.min1.js:18d @ angular.min1.js:35c @ angular.min1.js:18cc @ angular.min1.js:18Xc @ angular.min1.js:17(anonymous function) @ angular.min1.js:217a @ angular.min1.js:146(anonymous function) @ angular.min1.js:31r @ angular.min1.js:7c @ angular.min1.js:31

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您的问题似乎是您的浏览器由于跨域而阻止了对 random.html 的访问。作为测试的第一步，将 templateUrl 替换为模板：

 app.directive("random", function(){
        console.log("directive");            
        return {
            restrict:"E",
            templateUrl:`<h1>random content</h1>`
        };
    });

如果可行，请说明您是如何运行您的应用的。它在本地主机上吗？你在用tomcat、jboss等吗？您需要允许跨源 (for instance on Tomcat) 或让我们知道您使用哪个 URL 来查看您的应用程序和 random.html（例如，应用程序的 localhost:8080/index.html 和 localhost:8080/random.html？ )

我有一个plunker here for another question，它显示了使用 Template 和 TemplateURL 的指令。

让我们知道。

【讨论】：

当我使用template:"<h1>Random content</h1>" 时它可以成功运行。我不使用任何网址。我将它打开为 file://... 可能应该尝试 Tomcat 等？
浏览器阻止您通过 HTTP 请求读取本地文件。一种解决方案是运行本地 Web 服务器。 live-server 是一种流行的服务器，您可以将其包含在 gulp、Atom 编辑器等中。由于您似乎正在使用 netbeans，如果您知道如何部署到将作为本地 Web 服务器工作的 tomcat，它将通过 URL 为您的文件提供服务，例如本地主机：8080/account.html
在 netbeans 上，可能有一个内置服务器...我发现了这个：netbeans.org/projects/php/lists/users/archive/2015-01/message/…
或者你可以通过指令从 AngularJS 中读取文件...像这样：stackoverflow.com/questions/18839048/…
我建议转到本地 Web 服务器的路由... tomcat、jboss、express、live-server 并通过 HTTP 或 HTTPs 提供文件。