在 AngularJS 中处理 DOM 操作答案

【问题标题】：Dealing with DOM Manipulations in AngularJS在 AngularJS 中处理 DOM 操作
【发布时间】：2012-07-28 08:56:46
【问题描述】：

当我使用 jQuery 执行 DOM 操作（添加新 HTML）时，AngularJS 不会自动检测新 HTML 中的变量并用它们的值替换它们。例如：

$scope.showSummary = function($event){

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

};

这是一个简单的例子，但是在改变元素中的 HTML 之后（这个函数被 ng-click 调用），输出它仍然是 {{row}} 而不是 row 应该在上下文/范围。

【问题讨论】：

标签： angularjs

【解决方案1】：

您必须注入 $compile (http://docs.angularjs.org/api/ng.$compile) 并使用它，以便 Angular 了解新的 html。

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

但是，在控制器中进行 DOM 操作在角度上是不受欢迎的。您希望您的控制器处理业务，而您的视图处理视图。

尝试一个指令来做你想做的事。 http://docs.angularjs.org/guide/directive

【讨论】：

我试图这样做将近一天。你节省了很多时间。非常感谢安迪！你是摇滚明星！
您是否有权威参考资料支持控制器中的 DOM 操作不被接受的说法？我很想知道谁如此皱眉以及为什么皱眉。

【解决方案2】：

如果您为新元素使用片段（例如 $("").appendTo("body")），则为 JQuery prepend/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;
}

【讨论】：