Gestion des manipulations du DOM dans AngularJS

Question

Lorsque j'effectue une manipulation du DOM (ajout d'un nouveau HTML) à l'aide de jQuery, AngularJS ne détecte pas automatiquement les variables dans le nouveau HTML et ne les remplace pas par leurs valeurs. Par exemple :

$scope.showSummary = function($event){

    $($event.currentTarget).html("<div>{{row}}</div>");

};

Il s'agit d'un exemple simple, mais après avoir modifié le code HTML dans l'élément (cette fonction a été appelée par ng-click ), la sortie est toujours {{row}} au lieu de ce que rangée devrait signifier dans le contexte/le champ d'application.

Answer 1

Vous devez injecter $compile ( http://docs.angularjs.org/api/ng.$compile ) et l'utiliser pour qu'angular connaisse le nouveau html.

$compile('<div>{{row}}</div')($scope).appendTo($event.currentTarget);

Cependant, il est mal vu dans Angular de faire de la manipulation de DOM dans vos contrôleurs. Vous voulez que vos contrôleurs gèrent les affaires et que vos vues gèrent la vue.

Essayez une directive pour faire ce que vous voulez. http://docs.angularjs.org/guide/directive

Answer 2

Si vous utilisez des fragments pour les nouveaux éléments (par exemple, $("<" + "div>").appendTo("body")), l'utilisation d'un wrapper comme le suivant pour les méthodes JQuery prepend/append vous permet d'éviter de modifier votre code d'ajout d'éléments :

// run angular-compile command on new content
// (also works for prependTo/appendTo, since they use these methods internally)
var oldPrepend = $.fn.prepend;
$.fn.prepend = function()
{
    var isFragment = arguments[0][0] && arguments[0][0].parentNode && arguments[0][0].parentNode.nodeName == "#document-fragment";
    var result = oldPrepend.apply(this, arguments);
    if (isFragment)
        AngularCompile(arguments[0]);
    return result;
};
var oldAppend = $.fn.append;
$.fn.append = function()
{
    var isFragment = arguments[0][0] && arguments[0][0].parentNode && arguments[0][0].parentNode.nodeName == "#document-fragment";
    var result = oldAppend.apply(this, arguments);
    if (isFragment)
        AngularCompile(arguments[0]);
    return result;
};

function AngularCompile(root)
{
    var injector = angular.element($('[ng-app]')[0]).injector();
    var $compile = injector.get('$compile');
    var $rootScope = injector.get('$rootScope');
    var result = $compile(root)($rootScope);
    $rootScope.$digest();
    return result;
}