AngularJS: la Directive de ne pas travailler avec templateUrl

Nouveau angulaire et j'ai eu du mal avec ce qui devrait être une simple directive pour la dernière heure. Voudrais vraiment l'apprécier un peu d'aide!

Je crois hello devrait apparaître, n'arrive pas à le faire fonctionner?

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>
Remplacer templateUrl: avec template: <p>Hello</p> - t-il travailler?
Désolé de ne pas préciser, je l'ai eu à travailler avec le modèle, mais je vais avoir des ennuis avec templateUrl, qui est ce que je veux utiliser. Le simple Bonjour est juste un espace réservé
Im deviner votre URL est mal...si vous ouvrez la console et la tête à l'onglet réseau, vous devriez voir la demande pour hello.html et ça va probablement être le rouge.
essayez ce lien stackoverflow.com/questions/29528922/...

OriginalL'auteur user3821516 | 2014-07-09

  1. 13

    Si vous êtes à la tester en local et à l'aide de Google Chrome puis cela ne fonctionnera pas parce que AngularJS est de faire un appel Ajax de ces fichiers html, mais google Chrome bloque ce avec l'erreur:

    XMLHttpRequest ne peut pas charger le fichier:///[chemin...] à l'origine de la Croix
    les demandes sont prises en charge uniquement pour les protocoles: http, de données, de chrome,
    chrome-extension, https, chrome-extension-ressource.

    Vous pouvez le vérifier en ouvrant votre développeur de la console et l'affichage des erreurs.

    Pour obtenir autour de cette quelques façons:

    1. Vous pouvez créer un simple serveur web pour exécuter votre code. Si vous avez python il vous suffit d'exécuter la commande (EDIT: a partir de votre dossier contenant index.html):

      python -m SimpleHTTPServer

    2. Vous pouvez désactiver la même origine dans google Chrome:
      https://stackoverflow.com/a/6083677/1100379

    3. Utiliser une extension Chrome qui peut le faire pour vous. Je la regarde, et c'était le premier résultat:
      Permettez-Control-Allow-Origin

    Ce fut le cas à l'aide angulaire à l'intérieur d'une webview android.

    OriginalL'auteur Asher Garland

  2. 9

    Tout fonctionne correctement, assurez-vous que votre syntaxe est correcte.
    Ne manquez pas les virgules en JSON

    myApp.directive("hello", function() {
  return {
    restrict: 'E',
                 ^
    templateUrl:"hello.html"
  };
})

    Démo: http://plnkr.co/edit/Z6rjbsuqzmcD4gBem36c

    Le code peut fonctionner correctement sur Plunker, mais pourrait entraîner l'origine de la croix questions si nous sommes d'exécuter localement et non pas à l'aide d'un serveur local.
    il ne fonctionne pas sur plunker

    OriginalL'auteur Raghavendra

  3. 1

    En fait nous avons besoin pour donner le chemin relatif pour le templateUrl directive. Chemin relatif qui dépend totalement de fichier de composant dans lequel vous allez donner de chemin.

    supposons que votre fichier chemin d'accès peut être comme - app/hello.html

    alors votre templateUrl chemin d'accès doit être comme - templateUrl:"./hello.html"

    OriginalL'auteur Rohit

  4. 0

    ouvrir les outils de dev de chrome aller à l'onglet réseau, trouver reqest pour hello.html comparer reqested chemin avec votre chemin à hello.html sur le serveur. Déplacer hello.html en bonne place ou mise à jour templeteUrl

    OriginalL'auteur sylwester

  5. 0

    Ouvrir votre NodeJS commande propmpt et installer serveur http à l'aide de npm install serveur http

    serveur http est un zéro simple de configuration de ligne de commande du serveur http.

    Une fois installé, il suffit d'utiliser http-server-o dans votre NodeJS invite de commande.

    OriginalL'auteur kensplanet

  6. 0

    1. Télécharger Python et l'ajouter pour vous la variable d'environnement path

    2. Créer un fichier cmd pour lancer python serveur dans le répertoire où votre index.html les séjours.

    2) Créer un nouveau document texte dans la même racine que votre index.html

    2 b) écrivez - python -m SimpleHTTPServer 8080

    2 c) Enregistrer en tant que type "Tous les Fichiers", et avec un certain nom comme startServer .cmd

    1. Maintenant la solution de contournement pour ne pas avoir appel AJAX a été fait. Niso dans le navigateur 127.0.0.1:8080/index.html

    OriginalL'auteur Pikesh Prasoon