Question

我对angular很新，试图在angular指令中使用templateUrl。当我尝试在浏览器中运行本地html时，它会向我显示这些错误 - ＆gt;

XMLHttpRequest无法加载文件：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/baseChild1.html。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。

错误：[$ compile：tpload] http://errors.angularjs.org/1.5.0-rc.0/ $ compile / tpload？p0 = baseChild1.html＆amp; p1 = -1＆amp; p2 = 在错误（本机） at file：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js：6：421 在file：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js：149：48 at file：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:123：217 at m。$ eval（file：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:137：446） at m。$ digest（file：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:135:41） at m。$ apply（file：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js：138：236） at file：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:20:10 at Object.e [as invoke]（file：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:40：477） at c（file：///Users/suparnadey/Desktop/workspace/AngularJS/angular_directives/angular.min.js:19：440）

base.html文件

<!DOCTYPE html>
<html ng-app="iAXApp">

  <head>
    <meta charset="utf-8" />
    <title>IONOS iAX</title>

    <!-- <link rel="stylesheet" type="text/css" href="base.css"> -->

    <script src="angular.min.js"></script>
    <script src="base.js"></script>

  </head>
  <body ng-controller="MainCtrl">

      <main-directive></main-directive>

  </body>

</html>

base.js

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

app.controller('MainCtrl', function($scope) {
    $scope.name = "Publisher";


});

app.directive("mainDirective", function(){
    return{
        restrict: 'E',
        // tamplate: "<h1>{{name}}</h1>",
        templateUrl: "baseChild1.html"
    }
});

baseChild1.html

<h1>{{name}}</h1>

Answer 1

出于标准安全原因，所有现代浏览器都会阻止跨源请求。

安装此Chrome插件并启用它：chrome plugin to enable cors

如果这不起作用，那么您应该尝试在http服务器上运行项目。看看这个答案：http-server to run local projects.

我希望这肯定会有所帮助。

如何摆脱chrome中的跨源请求块？

1 个答案: