AngularJS + JQuery: Comment utiliser du contenu dynamique dans angularjs

Question

Je suis en train de travailler sur une application Ajax en utilisant à la fois JQuery et AngularJS.

Quand je l'ai mise à jour de contenu (qui contient angularjs liaisons) d'une div à l'aide de jquery html, le angularjs liaisons ne fonctionne pas.

Voici un exemple d'une version de ce que je suis en train de faire dans jsfiddle

J'ai du contenu dynamique à l'intérieur div id '#dynamicContent' et j'ai un bouton d'actualisation qui permettrait de mettre à jour le contenu de cette div lorsque l'actualisation est cliqué. Incrément fonctionne comme prévu si je ne suis pas d'actualiser le contenu, mais après je me suis actualiser angularjs liaison de l'arrêt de travail.

Cela peut ne pas être valide dans angularjs, mais à l'origine de l'application avec jquery et a commencé à utiliser angularjs plus tard, donc je ne peux pas migrer tout à angularjs. Aucune aide avec l'obtention de ce travail dans angularjs est grandement apprécié.

Answer 1

Vous devez appeler $compile sur la chaîne HTML avant de l'insérer dans le DOM afin que angular ait la possibilité d'effectuer la liaison.

Dans votre violon, cela ressemblerait à quelque chose comme ça.

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

Évidemment, $compile doit être injecté dans votre contrôleur pour que cela fonctionne.

Plus d'informations dans la documentation $compile .

Answer 2

Une autre Solution dans le Cas où Vous N'Avez pas de Contrôle Sur le Contenu Dynamique

Cela fonctionne si vous ne chargez pas votre élément par le biais d'une directive (ie. comme dans l'exemple dans le commentaire jsfiddles).

Enveloppez Votre Contenu

Enveloppez votre contenu dans un div de sorte que vous pouvez sélectionner si vous utilisez JQuery. Vous pouvez également choisir d'utiliser javascript natif pour obtenir votre élément.

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

Utilisation Angulaire De L'Injecteur

Vous pouvez utiliser le code suivant pour obtenir une référence à $compiler si vous n'en avez pas.

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

Résumé

Le post original semble supposer que vous aviez un $de la compilation de référence à portée de main. Il est évidemment plus facile quand vous avez les références, mais je ne savais pas si c'était la réponse pour moi.

Une mise en garde, le code précédent

Si vous utilisez un asp.net/mvc bundle avec rapetisser scénario, vous allez avoir des ennuis lorsque vous déployez en mode release. La difficulté vient de la forme de l'Erreur non Interceptée: [$injecteur:unpr] qui est causée par le minifier de jouer avec l'angle de code javascript.

Voici le chemin pour y remédier:

Remplacer les précédents extrait de code avec la surcharge suivante.

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

Cela a causé beaucoup de chagrin pour moi avant que je assemblés ensemble.