Menu
New to angular and I've been having trouble with what should be a simple directive for the past hour or so. Would really appreciate some help!
I believe hello should appear, can't seem to get it to work?
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>
554
If you are testing locally and using Google Chrome then this will not work because AngularJS is making an Ajax call to these html files, but Chrome blocks this with the error:
XMLHttpRequest cannot load file:///[filepath...] Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
You can verify this by opening up your developer console and viewing the errors.
To get around this a couple ways:
You can create a simple web server to run your code. If you have python you can just run the command (EDIT: from your folder containing index.html):
python -m SimpleHTTPServer
You can disable same origin policy in Chrome: https://stackoverflow.com/a/6083677/1100379
Use an Chrome extension which may do this for you. I looked one up and this was the first result: Allow-Control-Allow-Origin
162
Everything works fine, just make sure your syntax is correct. Do not miss comma's in JSON
myApp.directive("hello", function() {
return {
restrict: 'E',
^
templateUrl:"hello.html"
};
})
Demo: http://plnkr.co/edit/Z6rjbsuqzmcD4gBem36c
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
