AngularJS - NG-bind-html-pericoloso e ng-modello Problemi

Question

ho la seguente riga nel mio html:

<div ng-bind-html-unsafe="departmentConfig" class="control-group"></div>

e io uso un $resource arrivare a recuperare il codice HTML, assegnare il codice HTML per $scope.departmentConfig, e quindi la vista viene aggiornata perfettamente. L'HTML assegnato a $scope.departmentConfig contiene elementi modulo, con gli attributi ng-model in esso, ma quando cambio i valori in questi elementi di input, non aggiornano affatto il modello $scope.

Questo è quello che ho provato, sulla base di un sacco di altri posti di internet, e non funziona:

$resource('resources/sources/departments/:mappedName', { 
     mappedName:departmentKey 
    }).get(function(departmentConfig) { 
     // This will call another function that will build a chunk of HTML 
     $scope.departmentConfig = $scope.buildDepartmentConfigHtml(departmentConfig); 
     // This is my feeble attempt to access the element, and bootstrap it to include the items in the $scope model. 
     var $departmentConfigContainer = $('#departmentConfig'); 
     angular.bootstrap($departmentConfigContainer, ['sourcemanager']); 

Ho anche visto alcuni esempi jsFiddle in cui questo sembra funzionare, ma la mia non lo è. Sto chiamando il bootstrap troppo presto? Ho anche provato a mettere un $watch su $scope.departmentConfig come questo:

$scope.$watch('departmentConfig', function() { 
    var $departmentConfigContainer = $('#departmentConfig'); 
    angular.bootstrap($departmentConfigContainer); 
}); 

, ma non ha funzionato neanche. Scommetto che c'è una spiegazione semplice a questo, non riesco proprio a ottenere gli elementi di input con ng-model che vengono caricati dopo la compilazione della pagina per essere legati al modello. Qualsiasi aiuto è apprezzato, questa è l'ultima funzionalità di cui ho bisogno per lavorare sulla mia pagina. Fammi sapere se hai bisogno di ulteriori informazioni sulla mia configurazione.

Quindi, in poche parole, come posso forzare una sezione del DOM a ricompilare dopo aver saputo che è stata caricata?

UPDATE

Ecco un jsfiddle delinea quello che vorrei fare: http://jsfiddle.net/j_snyder/ctyfg/. Noterai che le proprietà due e tre non aggiornano il modello e sto chiamando bootstrap sul div esterno, sperando che includa quelle nel modello di rilegatura. Questa è la prima volta che ho postato su jsfiddle, per favore fatemi sapere se non potete vedere l'esempio.

Answer 1

ng-bind-html è creato per l'HTML normale, non per la compilazione di nuovi elementi angolari.

Si utilizzerà lo $compile service.

Ecco come si modifica il proprio esempio corrente per il lavoro: http://jsfiddle.net/andytjoslin/ctyfg/21/. Ma in questo modo finisce per essere cattivo, perché devi fare manipolazione DOM nel controller.

Hai solo bisogno di creare una direttiva che sostanzialmente fare quello che si voleva NG-bind-html da fare: http://jsfiddle.net/andytjoslin/ctyfg/22/