Question

我有一些问题我需要使用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（＆＃34;指令＆＃34）

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

Answer 1

您的问题似乎与您的浏览器因跨域来阻止对random.html的访问有关。作为测试的第一步，将templateUrl替换为template：

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

如果有效，请说明您的应用运行方式。它在localhost上吗？你在使用tomcat，jboss等吗？您需要允许跨源（for instance on Tomcat）或让我们知道您使用哪个URL来查看您的应用和random.html（例如，应用的localhost：8080 / index.html和localhost：8080 / random。 HTML？）

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

告诉我们。

我不能＆＃39;创建并使用AngularJS指令

1 个答案: