how do I get ng-include directive to work with a Content Delivery Network?

by

Yes, you are right – the problem is with cross-domain call.
Official docs say:

By default, the template URL is restricted to the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on it. To load templates from other domains or protocols you may either whitelist them or wrap them as trusted values. Refer to Angular’s Strict Contextual Escaping.

and

Please note: The browser’s Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy apply in addition to this and may further restrict whether the template is successfully loaded. This means that without the right CORS policy, loading templates from a different domain won’t work on all browsers.

Example: 

angular.module('myApp', []).config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from outer templates domain.
    'http://cdn.somewebsite.com/templates/**'
  ]); 
});

Helpful links:

So your problem may be solved by appropriate angular settings, but not for all browsers.

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. When to favor ng-if vs. ng-show/ng-hide?
  3. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  4. How can I dynamically add a directive in AngularJS?
  5. How to use the ‘replace’ feature for custom AngularJS directives?
  6. Link vs compile vs controller
  7. Angular.js directive dynamic templateURL
  8. What is the best way to conditionally apply attributes in AngularJS?
  9. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  10. Unit Testing AngularJS directive with templateUrl
  11. How to select an element by classname using jqLite?
  12. Angularjs loading screen on ajax request
  13. Confused about Angularjs transcluded and isolate scopes & bindings
  14. Angular: calling controller function inside a directive link function using &
  15. Angular directive how to add an attribute to the element?
  16. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  17. get original element from ng-click
  18. angular directive encapsulating a delay for ng-change
  19. angularjs share data config between controllers
  20. Call a method of a controller from another controller using ‘scope’ in AngularJS
  21. AngularJS leaves comments in HTML: is it possible to remove them?
  22. When to use the AngularJS `$onInit` Life-Cycle Hook
  23. AngularJS – how to override directive ngClick
  24. AngularJS: ngInclude vs directive
  25. Pass form to directive
  26. Angular directive name: only lower case letters allowed?
  27. What is ng-transclude?
  28. How to detect browser using angularjs?
  29. AngularJS. Convert tag value (Unix time to human-readable time)
  30. When to use double braces {{}} in angularJS

Leave a Comment