Umgang mit DOM-Manipulationen in AngularJS

Wenn ich DOM-manipulation (hinzufügen von neuen HTML) mit Hilfe von jQuery, AngularJS nicht automatisch erkennt Variablen in die neue HTML-Datei und ersetzen Sie Sie mit Ihren Werten. Zum Beispiel:

$scope.showSummary = function($event){

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

};

Dies ist ein einfaches Beispiel, aber nach der änderung den HTML-Code in das element (diese Funktion wurde von ng-click), die Ausgabe, die es noch {{row}} statt, was Zeile soll bedeuten, dass im Kontext/Rahmen.

InformationsquelleAutor der Frage xd44 | 2012-07-28

  1. 66

    Haben Sie injizieren $compile (http://docs.angularjs.org/api/ng.$kompilieren) und verwenden Sie es, so Winkel, kennt auch die neue html.

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

    Jedoch ist es verpönt in eckigen zu tun, DOM-manipulation, die in Ihrem Controller. Sie möchten Ihre Controller zu handhaben business und Ihre Ansichten zu handhaben, die Ansicht.

    Versuchen, eine Richtlinie zu tun, was Sie wollen. http://docs.angularjs.org/guide/directive

    InformationsquelleAutor der Antwort Andrew Joslin

  2. 2

    Wenn Sie Fragmente für neue Elemente (z.B. $("<" + "div>").appendTo("body")), die Verwendung einer wrapper-wie die folgenden für die JQuery-prepend/append-Methoden können Sie vermeiden, ändern Sie Ihr element-hinzufügen-code:

    //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;
}

    InformationsquelleAutor der Antwort Venryx

Schreibe einen Kommentar