ng-include ne fonctionne pas avec le script type=“text/ng-modèle”

Voici mon Plunker:

http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt

Lorsque le bouton est cliqué, le suivant doit être inséré avant le "Hello World!" durée:

<script type="text/ng-template" id="tempTest">
  <div>
    <span>Properly Inserted</span> 
  </div>
</script>

moins les balises de script, bien sûr.

- Je y parvenir par l'insertion dynamique de la div suivants:

<div ng-include="tempTest"></div>

Et puis le compiler. Cependant, si vous regardez le journal, la seule chose qui est à gauche après la compilation est: est-ce

<!-- ngInclude: tempTest -->

Ce qui se passe ici? Pourquoi n'est pas mon insérer correctement la compilation? la logique est la suivante:

$scope.insert = function(){
    //Create elements //
    var container = angular.element('<div id="compiled-container"></div>');
    var element = angular.element('<div ng-include="tempTest"></div>');

    //Insert parent Container
    $('#greeting').before(container);

    //insert the element
    $animate.enter(element, container);

    //test insertion
    console.log("Before Compile: " +container.html() )

    $compile(element);

    //look again after compile
    console.log("After Compile:  " +container.html() )

};

OriginalL'auteur JHixson | 2014-01-15

angularjs

45

La rapide réponse aurait été:

<div ng-include="'tempTest'"></div>

Probablement vous avez juste oublié les guillemets simples pour référence le modèle.

La long réponse:

Il n'est pas conseillé pour accéder au DOM à l'intérieur d'un contrôleur, vous aurez en difficulté comme le code sera inondé avec $scope.$apply() appels. Réfléchir à la mise en œuvre de cette fonctionnalité avec une directive. J'ai essayé de créer un point de départ à partir de votre code ici

http://plnkr.co/UWUCqWuB9d1dn6Zwy3J3
```
var app = angular.module('plunker', ['ngAnimate']);

app.directive('greeting', function($compile){
  return {
    restrict: 'E',
    scope: {
      name: '='
    },
    template: '<div>'+
              '  <span>Hello {{name}}!</span>'+
              '  <button ng-click="insert()">test</button>'+
              '</div>',
    link: function(scope, element, attrs) {
       scope.insert = function() {
         var container = angular.element('<div ng-include="\'tempTest.html\'"></div>');
         element.before($compile(container)(scope));
       }
    }
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
```
```
<greeting name="name"></greeting>
```
Les éléments du modèle sont insérés avant le Bonjour tout le Monde! textnode chaque fois que le bouton est cliqué.

Note de côté Vous n'avez même pas besoin de la scope{ name: '='} que la directive va hériter de ses environs portée, mais sa le moyen le plus propre à passer (se lier) contrôleur de variables à une directive explicite.

Non seulement avez-vous été correctement les guillemets simples autour de l'ID de modèle, je l'ai vu aussi dans votre grand exemple que je n'ai pas cette ligne correcte: $compile(element)($scope);. Je n'ai pas eu le ($scope) partie. Aussi, vous avez tout à fait raison au sujet de la Directive. En fait, mon code est dans une directive. Je viens de tenter de lancer un exemple de mon problème aussi vite que possible. Votre Directive a quelques éléments intéressants que je vais utiliser dans mon propre cas, toutefois, je vous remercie beaucoup pour votre aide!!
est-il possible de faire référence à un ng-modèle de modèle de texte vivant sur un autre fichier html? Comment angulaire savoir comment un modèle, s'il n'est pas sur le même fichier ou a déjà été chargé?
Je travaille pour moi . Merci

OriginalL'auteur angabriel
2
```
<div ng-include src="tempTest"></div> 
```
Cela devrait fonctionner

^^^ notez que ce PAS même de commencer à travailler, à moins que les guillemets simples sont ajoutés (comme @JHixson l'a déjà souligné), comme suit:
```
<div ng-include src="'tempTest'"></div>
```
tempTest besoin d'avoir des guillemets simples autour d'elle, comme dans la accepté de répondre.
Mon downvote stands (dans mon esprit); l'original de la réponse est incorrecte assez trompeuse pour les gens pas au courant de la syntaxe nécessaire.
Il fonctionne réellement just fine sans les guillemets simples, si la chaîne de caractères passée en référence à une Chaîne de caractères contenant l'url correcte

OriginalL'auteur lisapanda

Simplement votre script :

<script type="text/ng-template" id="tempTest">
  <div>
    <span>Properly Inserted</span> 
  </div>
</script>

Doit être à l'intérieur de la MainCtrl contrôleur sélecteur comme ceci :

<div ng-app="plunker" ng-controller="MainCtrl">
<script type="text/ng-template" id="tempTest">
<div>
<span>Properly Inserted</span> 
</div>
</script>
</div>

OriginalL'auteur ALWAN

Vous devez vous connecter pour publier un commentaire.