Comment obtenir la directive ng-include pour fonctionner avec un réseau de diffusion de contenu?

Est-il possible d'obtenir ng-inclure la directive de travailler avec un CDN?

Dans ce cas:

<div ng-include='http://cdn.somewebsite.com/templates/home.tpl.html'></div>

Le cdn de sous-domaine de somewebsite.com est mappé à travers le DNS/CName sur un réseau de diffusion de contenu.

Cependant lors du chargement du site principal somewebsite.com il ne rend pas le modèle. Je suppose qu'en interne c'est de la traiter comme une inter-domaine d'appel.

Est il des solutions pour obtenir Angulaire modèles d'être hébergé sur des tiers CDN et de travailler avec le domaine local?

source d'informationauteur Val

  1. 23

    Oui, vous avez raison, le problème est avec la croix-domaine d'appel.

    Officiel docs disent:

    Par défaut, le modèle d'URL est limitée à un même domaine et du protocole le document d'application. Ceci est fait en appelant $sce.getTrustedResourceUrl sur elle. Pour charger des modèles issus d'autres domaines ou des protocoles, vous pouvez soit blanche ou enveloppez-les comme de confiance des valeurs. Consultez Angulaire du Strict Contextuelle s'Échapper.

    et

    Veuillez noter: Le navigateur de la Même Politique de l'Origine et de Cross-Origin Resource sharing (SCRO) de la politique s'appliquent en plus de cela, et peut restreindre davantage si le modèle est correctement chargé. Cela signifie que, sans le droit de la SCRO politique, le chargement de modèles à partir d'un autre domaine ne fonctionnera pas sur tous les navigateurs.

    Exemple: 

    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/**'
  ]); 
});

    Liens utiles:

    De sorte que votre problème peut être résolu par des mesures angulaires paramètres, mais pas pour tous les navigateurs.

  2. 0

    Peut-être vous pouvez modifier ce code un peu. J'ai de mon client intranet dans un datatbase et qui est connecté à distance à un serveur d'API. J'utilise angulaire app pour tirer le HTML, mais il est une partie d'un objet JSON, alors, évidemment, c'est assez specicific à mes propres besoins.

    Il m'arrive d'avoir le plein contrôle sur la SCRO attributs de mon serveur, donc je peux le faire. Si vous l'essayez google ou un autre site... vous êtes coincé avec un iframe. (Je n'ai pas idée de ce qui est permis par le JS est tellement stricte!)

    Donc, voici ce que j'ai fais pour obtenir mon HTML à distance de données.

    1:

    Dans mon contrôleur je ajouter ceci:

    <div ng-bind-html="content"></div>

    ensuite dans le code, j'ajoute ce

    $http.get(url)
    .then(function (data) {
        $scope.content = $sce.trustAsHtml(data.data.PageData);
    });

    Que c'est. Il suffit de ne pas oublier que le site dans l'URL doit vous permettre d'obtenir les données par l'intermédiaire de votre système à distance.

    MAINTENANT: Juste pour le fun, j'ai l'habitude d'utiliser des IFRAMEs pour importer des données à partir d'autres sites avant de la SCRO a même été inventé. C'était un gros hack. Avant d'AJAX, je ferais un petit formulaire sur une page avec toutes les valeurs d'un formulaire vide. Sur une autre page, j'aurais une iframe pour et il suffit de remplir les cases avec le javascript et le post de retour avec javascript, en gardant la page principale sans rechargement.

    Si vous avez besoin de plus de contrôle de vos données, vous pouvez tout simplement caché iframe, rip le code HTML que vous voulez, mettez-la dans une variable et le déposer où vous le voulez sur votre page.

    Il y a toujours une demi-$$ed façon de faire les choses. 🙂