angularjs $ skompilować powraca tablicę HTML, ale nie rzeczywiste html

Question

Mam następujący kod:

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

I byłoby oczekiwać, że do wygenerowania wejściowe, jakiś przedział, który jest sprzężony poprzez zakres i przerwy. Jednak uzyskać ten wynik:

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

Próbowałem też szablon, w komentarzu tutaj oddzielnie, a następnie zakomentowanie część łącza. Generuje to elementy wejściowe i łamiące, ale nie zakres, który pokazuje przykładowy plik wejściowy modelu.

Mam niepróbującą próbkę pod numerem http://jsfiddle.net/KvdM/nwbsT/, która to demonstruje.

Answer 1

Spróbuj tego:

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

Answer 2

Uruchomienie funkcji zwróconej przez usługę $ compile daje elementy DOM zamiast html. Więc trzeba wstawić je do swojej strony za pomocą dołączania (lub jego odpowiednik):

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

Answer 3

Być może najprostszym sposobem jest użycie zakodowane szablon zamiast dynamiczny generowany jeden

<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

Zależy wha Rodzaj danych powinien być skompilowany, czasami Angular zwraca typ węzła komentarza.

Odpowiednim węzłem, którego chcemy użyć, jest next() (jego pierwsze siostrzeniec).

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

po prostu potrzebne, aby dodać jQuery używać „.html” i stała nazewnictwa NG-modelu