2015-03-08 1 views
0

j'ai créé simple plnk @ plnkr.co. Ça ne marche pas là. Cependant, le même code fonctionne en local.AngularJS, directive sur mesure ne fonctionne pas @ plnkr

plnk @plnkr.co link

index.html

<!DOCTYPE html> 
<html ng-app='app'> 

    <head> 
    <script data-require="[email protected]*" data-semver="1.2.6" src="https://code.angularjs.org/1.2.6/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller='controller'> 
    <h1>Hello Plunker!</h1> 
    <div my-sample></div> 
    </body> 

</html> 

script.js

// Code goes here 
'use strict'; 
var app = angular.module('app',[]). 
controller('controller',function($scope) 
{ 

}).directive('mySample',function($compile) 
{ 
    return { 
    link : function(scope,element,attrs,controller) 
    { 
     var markup = "<input type='text' ng-model='text' />{{text}}" 
     angular.element(element).html($compile(markup)(scope)); 
    } 
    } 
}); 

La sortie en plnkr vient comme:

Bonjour Plunker!

[[objet HTMLInputElement], [objet HTMLSpanElement]]

étrange, mais quand je lance le même en html locale, il rend très bien. Que se passe t-il ici ??

Aussi je me sers js angulaire 1.2.6 son parce que c'est ce qui est utilisé dans mon travail - l'application de production ... donc je suis d'apprentissage angulaire à l'aide 1.2.6 pour l'instant.

+0

est-il nécessaire d'utiliser le service '$ de la compile'? Pourquoi ne pas simplement utiliser le champ 'template'? Voici le [lien] (http://plnkr.co/edit/AAT7gIE1mhLsf0us6ojp?p=preview) –

+0

@IlyaIvanov, oui modèle fait le travail aussi. Cependant, je traversais différentes façons d'atteindre le même résultat ici. Quand ça ne marchait pas à Plnkr, mais ça fonctionnait en local ça m'avait un peu étonné. Je comprends parfaitement que pour les besoins de balisage simple, je devrais utiliser le modèle. Le tutoriel de pluralsight sur les fondamentaux angulaires de js par joe eames et cooper en dit long. – miniGweek

Répondre

1

Vous avez juste besoin de le compiler un peu différemment.

element.html("<input type='text' ng-model='text' />{{text}}"); 
$compile(element.contents())(scope); 

Plunker

Juste un petit mot: Je suppose que vous avez fait ici est simplifiée et dans votre cas réel, il est nécessaire de compiler votre modèle, car pour l'instant il n'y a pas.

+0

OP dit que le même code fonctionne en local alors quel est le scénario pour cela? – squiroid

+0

@squiroid Je ne sais pas comment cela fonctionne, le plunker ne fonctionne pas aussi bien et la compilation ne semble pas correcte. (html insertion après la compilation) –

+0

Étrange! ça marche, ok je sais que ça ne devrait pas être étrange, mais quoi de différent quand c'est fait avec plnkr? @ OmriAharon, oui bien sûr, je suis en train d'essayer différentes façons d'atteindre la même chose. Je devrais juste employer le modèle pour les besoins simples de balisage, et le lien pour plus complexe ... et pourtant pour passer par le tut complet ... Cependant ce comportement chez plnkr m'a confondu. – miniGweek