AngularJS + JQuery: come far funzionare il contenuto dinamico in angularjs

Sto lavorando su un'app Ajax utilizzando sia jQuery che AngularJS.

Quando aggiorno il contenuto (che contiene i collegamenti AngularJS) di un div utilizzando la htmlfunzione di jQuery , i collegamenti AngularJS non funzionano.

Di seguito è riportato il codice di ciò che sto cercando di fare:

$(document).ready(function() {
  $("#refreshButton").click(function() {
    $("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>")
  });
});

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id='dynamicContent'>
    <button ng-click="count = count + 1" ng-init="count=0">
        Increment
      </button>
    <span>count: {{count}} </span>
  </div>


  <button id='refreshButton'>
    Refresh
  </button>
</div>

Dispongo di contenuto dinamico all'interno di un div con ID #dynamicContente ho un pulsante di aggiornamento che aggiorna i contenuti di questo div quando si fa clic su Aggiorna. L'incremento funziona come previsto se non aggiorno il contenuto, ma dopo l'aggiornamento, l'associazione AngularJS smette di funzionare.

Questo potrebbe non essere valido in AngularJS, ma inizialmente ho creato un'applicazione con jQuery e ho iniziato a utilizzare AngularJS in seguito, quindi non posso migrare tutto su AngularJS. Qualsiasi aiuto per farlo funzionare in AngularJS è molto apprezzato.

Devi chiamare $compile la stringa HTML prima di inserirla nel DOM in modo che angular abbia la possibilità di eseguire l'associazione.

Nel tuo violino, sarebbe qualcosa del genere.

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

Ovviamente, $compiledeve essere iniettato nel tuo controller affinché funzioni.

Maggiori informazioni nella $compiledocumentazione .

Un'altra soluzione nel caso in cui non si abbia il controllo sui contenuti dinamici

Funziona se non hai caricato il tuo elemento tramite una direttiva (es. Come nell'esempio nei jsfiddles commentati).

Racchiudi i tuoi contenuti

Avvolgi il tuo contenuto in un div in modo da poterlo selezionare se stai usando JQuery . Puoi anche scegliere di utilizzare javascript nativo per ottenere il tuo elemento.

<div class="selector">
    <grid-filter columnname="LastNameFirstName" gridname="HomeGrid"></grid-filter>
</div>

Usa l'iniettore angolare

Puoi usare il codice seguente per ottenere un riferimento a $ compile se non ne hai uno.

$(".selector").each(function () {
    var content = $(this);
    angular.element(document).injector().invoke(function($compile) {
        var scope = angular.element(content).scope();
        $compile(content)(scope);
    });
});

Sommario

Il post originale sembrava presumere che tu avessi un riferimento a $ compile a portata di mano. Ovviamente è facile quando hai il riferimento, ma non l'ho fatto, quindi questa era la risposta per me.

Un avvertimento del codice precedente

Se stai utilizzando un bundle asp.net/mvc con lo scenario minify, ti troverai nei guai quando esegui la distribuzione in modalità di rilascio. Il problema si presenta sotto forma di Uncaught Error: [$ injector: unpr] che è causato dal minifier che interferisce con il codice javascript angolare.

Ecco il modo per rimediare :

Sostituisci lo snippet di codice precedente con il seguente overload.

...
angular.element(document).injector().invoke(
[
    "$compile", function($compile) {
        var scope = angular.element(content).scope();
        $compile(content)(scope);
    }
]);
...

Questo mi ha causato molto dolore prima di metterlo insieme.

Aggiunta alla risposta di @ jwize

Perché angular.element(document).injector()stava dando un errore injector is not defined Quindi, ho creato una funzione che puoi eseguire dopo la chiamata AJAX o quando DOM viene modificato usando jQuery.

  function compileAngularElement( elSelector) {

        var elSelector = (typeof elSelector == 'string') ? elSelector : null ;  
            // The new element to be added
        if (elSelector != null ) {
            var $div = $( elSelector );

                // The parent of the new element
                var $target = $("[ng-app]");

              angular.element($target).injector().invoke(['$compile', function ($compile) {
                        var $scope = angular.element($target).scope();
                        $compile($div)($scope);
                        // Finally, refresh the watch expressions in the new element
                        $scope.$apply();
                    }]);
            }

        }

usalo passando solo il selettore del nuovo elemento. come questo

compileAngularElement( '.user' ) ;