Question

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

$scope.showSummary = function($event){

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

};

这是一个简单的示例，但在更改元素中的HTML后（此函数由ng-click调用），输出仍为{{row}}而不是行应该在上下文/范围中表示。

Answer 1

您必须注入$compile（http://docs.angularjs.org/api/ng.$compile）并使用它，以便角度知道新的HTML。

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

然而，在控制器中进行DOM操作时，角度不赞成。您希望控制器处理业务和视图以处理视图。

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

Answer 2

如果您将片段用于新元素（例如$（＆＃34;＆lt;＆＃34; +＆＃34; div＆gt;＆＃34;）。appendTo（＆＃34; body＆＃34;）），对于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;
}

处理AngularJS中的DOM操作

2 个答案: