无法在Angularjs中使用templateUrl加载模板

发布时间：2020-12-17 08:38:19 所属栏目：安全来源：网络整理

导读：我只是学习Angularjs，以及如何使用templateUrl加载模板。我有一个简单的指令： var mainApp = angular.module("mainApp",[]);mainApp.directive("request",function() { return { restrict: "E",scope: { data: "@" },templateUrl: "te.html" }}) 我尝试使

我只是学习Angularjs，以及如何使用templateUrl加载模板。

我有一个简单的指令：

var mainApp = angular.module("mainApp",[]);

mainApp.directive("request",function() {
    return {
        restrict: "E",scope: {
            data: "@"
        },templateUrl: "te.html"
    }
})

我尝试使用这样的指令：

<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery-2.0.0.js"></script>
        <script src="js/angular.js"></script>

        <link href="css/bootstrap.css" rel="stylesheet" />
        <script src="js/bootstrap.js"></script>

        <script src="js/main.js"></script>

        <style type="text/css">
            div {
                background-color: cornflowerblue;
            }

            #appPanel {
                width: 900px;
                height: 1000px;
            }

        </style>
    </head>
    <body>
        <div id="appPanel" ng-app="mainApp" class="container">
            <div class="row-fluid" style="height: 15%">
                <div class="span12">
                    title
                </div>
            </div>
            <div class="row-fluid" style="height: 85%">
                <div class="span3" style="height: 100%">
                    actions
                </div>
                <div class="span9" style="height: 100%"  ng-controller="AppCtrl">
                    <div ng-repeat="request in data.requests">
                        <request data="request"></request>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

一旦我打开我的页面，我有这个例外：

XMLHttpRequest cannot load file:///Users/chenguangli/Documents/workspace-web/ournotes/te.html. Origin null is not allowed by Access-Control-Allow-Origin.   default.html:0
Error: Failed to load template: te.html
    at Error (<anonymous>)
    at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:4503:17
    at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8898:11
    at wrappedErrback (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:6806:57)
    at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:6882:53
    at Object.Scope.$eval (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8011:28)
    at Object.Scope.$digest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:7876:25)
    at Object.Scope.$apply (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8097:24)
    at done (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:9111:20)
    at completeRequest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:9274:7)    js/angular.js:5704
    js/angular.js:5704
    js/angular.js:4800
  wrappedErrback    js/angular.js:6808
    js/angular.js:6882
  Scope.$eval   js/angular.js:8011
  Scope.$digest js/angular.js:7876
  Scope.$apply  js/angular.js:8097
  done  js/angular.js:9111
  completeRequest   js/angular.js:9274
  xhr.onreadystatechange    js/angular.js:9244

我没有尝试加载模板文件跨域确定(te.html是在同一个fold.html default.html)。

有谁能帮我找出发生了什么吗？

问题是，你正在运行你的例子离开文件系统(使用file：//协议)和许多浏览器(Chrome，Opera)限制XHR调用时使用file：//协议。 AngularJS模板是通过XHR下载的，这与文件的使用结合：//协议导致您得到的错误。

在解决这种情况时，您有几个选择：

>使用Web服务器运行示例(有许多简单的解决方案，如https://code.google.com/p/mongoose/或几行node.js脚本)
>使用< script>将模板嵌入您的index.html文件中指令：http://docs.angularjs.org/api/ng.directive:script，所以您的模板与主HTML文件一起下载，不再需要通过XHR加载它们
>更改浏览器设置以允许通过文件：//协议进行XHR调用。例如，这可以在Chrome中完成，如：Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!