Angular.js $compile renvoie un tableau de html mais pas le html réel

Question

J'ai le code suivant :

app.directive('mySample', function($compile) {
    return {
        //template:"<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>"
        link: function(scope, element, atts, controller) {
            var markup = "<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>";  
            angular.element(element).html($compile(markup)(scope));
            console.log($compile(markup)(scope));
        }
    };
});

Et je m'attendrais à ce qu'il génère une entrée, un span qui est couplé via le scope et un break. Cependant, j'obtiens cette sortie :

[[object HTMLInputElement], [object HTMLSpanElement], [object HTMLBRElement]]

J'ai également essayé le modèle, dans le commentaire ici, séparément et ensuite en commentant la partie lien. Cela génère les éléments input et break mais pas le span qui montre le modèle couplé input sampleData.

J'ai un échantillon qui ne fonctionne pas à http://jsfiddle.net/KvdM/nwbsT/ qui le démontre.

Answer 1

Essayez ça :

element.html(markup);
$compile(element.contents())(scope);

Answer 2

L'exécution de la fonction retournée par le service $compile donne des éléments DOM plutôt que du html. Vous devez donc les insérer dans votre page en utilisant append (ou équivalent) :

angular.element(element).append($compile(markup)(scope));

Answer 3

Le plus simple est peut-être d'utiliser un modèle codé en dur plutôt qu'un modèle généré dynamiquement.

<div ng-app="myApp">
    <my-sample sample-data="'test'"></my-sample>
</div>

var app = angular.module('myApp', []);

app.directive('mySample', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            sampleData: '=sampleData'
        },
        template: "<input type='text'/> {{sampleData}} <br/>",
    };
});

FIDDLE

Answer 4

Cela dépend du type de données qui doivent être compilées, parfois Angular renvoie un type de nœud de commentaire.

Le noeud pertinent que nous voulons utiliser est le noeud next() (son premier frère).

var tpl = '<div class="myWidget" ng-include="'templates/myWidget.html'"></div>;
var _myWidget = $compile(tpl)(scope);
var myWidget = null;

scope.$on('$includeContentLoaded', function () {
    myWidget = _myWidget.next();
});

Answer 5

Il suffit d'ajouter le jquery pour utiliser ".html" et de corriger le nommage du ng-model.