Angular.js $ compilare rendimenti gamma di html, ma non effettiva html

Question

ho il seguente codice:

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)); 
     } 
    }; 
}); 

E mi aspetterei per generare un ingresso, un po 'di arco che è accoppiato con la portata e una pausa. Tuttavia ottengo questo output:

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

Ho anche provato il modello, nel commento qui, separatamente e poi commentando la parte di collegamento. Ciò genera gli elementi input e break ma non l'estensione che mostra il modello coupled sampleData.

Ho un campione non funzionante a http://jsfiddle.net/KvdM/nwbsT/ che lo dimostra.

Answer 1

Prova questo:

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

Answer 2

L'esecuzione della funzione restituita dal servizio $ compile fornisce elementi DOM anziché html. Quindi è necessario inserirli nella vostra pagina utilizzando accoda (o equivalente):

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

Answer 3

Forse il modo più semplice è quello di utilizzare un modello di hard-coded, piuttosto che ha generato una dinamica uno

<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

Dipende wha il tipo di dati dovrebbe essere compilato, alcune volte Angular restituisce un tipo di nodo di commento.

Il nodo rilevante che vogliamo utilizzare è il next() (il suo primo fratello).

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

Hai solo bisogno di aggiungere il jquery di usare ".html" e fissato la denominazione di NG-modello