Работа с маневрами DOM в AngularJS

Когда я выполняю манипуляцию DOM (добавляю новый HTML) с помощью jQuery, AngularJS не автоматически обнаруживает переменные в новом HTML и заменяет их своими значениями. Например:

$scope.showSummary = function($event){

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

};

Это простой пример, но после изменения HTML в элементе (эта функция была вызвана ng-click), на выходе он все еще {{row}} вместо того, что строка должна означать в контексте/области.

Ответ 1

Вам нужно ввести $compile (http://docs.angularjs.org/api/ng.$compile) и использовать его, чтобы angular знал о новом html.

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

Тем не менее, в angular недопустимо выполнять манипуляции с DOM в ваших контроллерах. Вы хотите, чтобы ваши контроллеры обрабатывали бизнес и ваши представления для обработки представления.

Попробуйте указать, что вы хотите делать. http://docs.angularjs.org/guide/directive

Ответ 2

Если вы используете фрагменты для новых элементов (например, $( "<" + "div > " ). appendTo ( "body" )), использование обертки, подобной следующей для методов JQuery preend/append, позволяет избежать для изменения кода добавления элементов:

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