在AngularJS中处理DOM操作

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

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

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

Answer 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

Answer 2

如果为新元素使用片段（例如$（“<”+“div>”）。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; }