在AngularJS中处理DOM操作

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

$scope.showSummary = function($event){

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

};

$scope.showSummary=函数（$event）{
$（$event.currentTarget.html（“{row}”）；
};

---

这是一个简单的示例，但是在更改元素中的HTML后（此函数由

ng click

调用），输出仍然是

{{row}

，而不是上下文/范围中的行应该是什么意思。

您必须插入

$compile

（）并使用它，以便您了解新的HTML

---

$compile（{row}}如果对新元素（例如$（“”）.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;
}

我试着这样做了将近一天。你节省了很多时间。非常感谢Andy！你是一个摇滚明星！你有权威的参考资料支持控制器中的DOM操作不受欢迎的说法吗？我想知道是谁和为什么。