AngularJS + JQuery: Como obter conteúdo dynamic trabalhando em angularjs

Eu estou trabalhando em um aplicativo Ajax usando jQuery e AngularJS.

Quando eu atualizo o conteúdo (que contém ligações AngularJS) de uma div usando a function html do jQuery, as ligações AngularJS não funcionam.

A seguir está o código do que estou tentando fazer:

Eu tenho conteúdo dynamic dentro de um div com o ID #dynamicContent e tenho um botão de atualização que atualiza o conteúdo desse div quando a atualização é clicada. Increment funciona como esperado se eu não atualizar o conteúdo, mas depois de atualizar, a binding AngularJS pára de funcionar.

Isso pode não ser válido no AngularJS, mas inicialmente eu construí o aplicativo com o jQuery e comecei a usar o AngularJS mais tarde, então não posso migrar tudo para o AngularJS. Qualquer ajuda para fazer isso funcionar no AngularJS é muito apreciada.

Você precisa chamar $compile na string HTML antes de inseri-la no DOM para que o angular tenha a chance de realizar a binding.

Em seu violino, seria algo como isto.

 $("#dynamicContent").html( $compile( "count: {{count}} " )(scope) ); 

Obviamente, $compile deve ser injetado em seu controlador para que isso funcione.

Leia mais na documentação do $compile .

Outra solução caso você não tenha controle sobre o conteúdo dynamic

Isso funciona se você não carregar seu elemento por meio de uma diretiva (por exemplo, como no exemplo nos jsfiddles comentados).

Encerrar seu conteúdo

Quebra seu conteúdo em um div para que você possa selecioná-lo se estiver usando o JQuery . Você também pode optar por usar o JavaScript nativo para obter seu elemento.

 

Use o injetor angular

Você pode usar o seguinte código para obter uma referência a $ compile se você não tiver um.

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

Resumo

O post original parecia supor que você tinha uma referência $ compile à mão. É obviamente fácil quando você tem a referência, mas eu não o fiz, essa foi a resposta para mim.

Uma ressalva do código anterior

Se você estiver usando um pacote asp.net/mvc com o cenário de minimização, você terá problemas ao implantar no modo de liberação. O problema vem na forma de erro não detectado: [$ injector: unpr], que é causado pelo minifixador mexendo com o código javascript angular.

Aqui está a maneira de remediar :

Substitua o snippet de código anterior pela sobrecarga a seguir.

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

Isso causou muita dor para mim antes de eu juntar tudo.

Além da resposta do @jwize

Porque angular.element(document).injector() estava dando erro injector is not defined Então, eu criei a function que você pode executar após a chamada AJAX ou quando o DOM é alterado 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(); }]); } } 

use-o passando apenas o seletor do novo elemento. como isso

 compileAngularElement( '.user' ) ;