I am trying with AngularJS directive, here is my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Directive</title>
<script type="text/javascript" src="http://ift.tt/1zlm4Ud"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<photo photo-src="abc.jpg" caption="This is so Cool" />
</body>
</html>
app.js
var app = angular.module('myapp',[]);
app.directive('photo',function(){
return {
restrict: 'E',
templateUrl: 'photo.html',
replace: true,
scope: {
caption: '@',
photoSrc: '@'
}
}
});
photo.html
<figure>
<img ng-src="{{photoSrc}}" width="500px">
<figcaption>{{caption}}</figcaption>
</figure>
I test the file by open it directly on browser. It works fine on Firefox, but not on IE & chrome. Both IE & Chrome show error of Failed to load template
How can I fix it?
Aucun commentaire:
Enregistrer un commentaire