0

I copied the example of ng-include from the tutorial ngInclude but it doesn't seem to work. I tried defining the templates as script partials (as in the jsFiddle of the tutorial), and it works, but when I keep them as separate files in the same folder (template1.html and template2.html), it stops working.

Again, my code is EXACTLY as in the tutorial:

index.html

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <select ng-model="template" ng-options="t.name for t in templates">
       <option value="">(blank)</option>
      </select>
      url of the template: <tt>{{template.url}}</tt>
      <hr/>
      <div ng-include src="template.url"></div>
    </div>
  </body>
</html>

template1.html

Content of template1.html

template2.html

Content of template2.html

script.js

function Ctrl($scope) {
  $scope.templates =
    [ { name: 'template1.html', url: 'template1.html'}
    , { name: 'template2.html', url: 'template2.html'} ];
  $scope.template = $scope.templates[0];
}

Thanks,

Frank

UPDATE:

Resolved. The problem apparently was caused by trying this on Chrome.

Sajal
  • 4,359
  • 1
  • 19
  • 39
Momochichi
  • 1
  • 1
  • Questions concerning problems with code you've written must describe the specific problem and **include** valid code to reproduce it. – Stewie Jul 04 '13 at 12:07
  • Please include code/errors. No body want to explore whole tutorial for your learning – Pranav Singh Jul 04 '13 at 12:27
  • Added, thanks. The error is simply that the templates are not included. – Momochichi Jul 04 '13 at 12:42
  • Look at the request made by browser, maybe the server path is incorrect or maybe the url binding is not working. – Chandermani Jul 04 '13 at 12:51
  • Create a fiddle of your own. – Stewie Jul 04 '13 at 13:00
  • jsFiddle only allows a single file, right? I think that's why Angular used a single file for their fiddle (http://jsfiddle.net/PKejV/). When I use that code, it works, but when I put the templates in separate html files, that when it fails. Since the problem involves multiple html files, I can't demonstrate it in fiddle. – Momochichi Jul 04 '13 at 13:10
  • Thanks Chandermani! I did as you suggested and found that Chrome has the error "Origin null is not allowed by Access-Control-Allow-Origin" when trying to access local files. The solution was to launch Chrome with --allow-file-access-from-files if not deploying on a server. -_- Thanks all! – Momochichi Jul 04 '13 at 13:29

0 Answers0