对于角度来说是新的,我在过去一小时左右应该是一个简单的指令时遇到了麻烦.非常感谢一些帮助!
我相信你好应该出现,似乎无法让它发挥作用?
的test.html
<html> <head lang="en"> <title>Test</title> </head> <body> <div ng-app="myApp"> <hello></hello> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
main.js
var myApp = angular.module('myApp',[]); myApp.directive("hello",function() { return { restrict: 'E' templateUrl:"hello.html" }; })`
hello.html的
<p>Hello</p>
解决方法
如果您在本地测试并使用谷歌浏览器,那么这将无法工作,因为AngularJS正在对这些html文件进行Ajax调用,但Chrome会阻止此错误:
XMLHttpRequest cannot load file:///[filepath…] Cross origin
requests are only supported for protocol schemes: http,data,chrome,
chrome-extension,https,chrome-extension-resource.
您可以通过打开开发人员控制台并查看错误来验证这一点.
为了解决这个问题:
>您可以创建一个简单的Web服务器来运行您的代码.如果你有python,你可以运行命令(编辑:从包含index.html的文件夹):
python -m SimpleHTTPServer
>您可以在Chrome中停用相同的来源政策:
https://stackoverflow.com/a/6083677/1100379
>使用可以为您执行此操作的Chrome扩展程序.我看了一眼,这是第一个结果:
Allow-Control-Allow-Origin