我如何使angular.js重新评估/重新编译内部的HTML？

我正在做一个修改它的内部html的指令。 目前代码：

.directive('autotranslate', function($interpolate) { return function(scope, element, attr) { var html = element.html(); debugger; html = html.replace(/\[\[(\w+)\]\]/g, function(_, text) { return '<span translate="' + text + '"></span>'; }); element.html(html); } }) 

它的工作原理，除了内部的HTML不是由angular评估。 我想触发element子树的重估。 有没有办法做到这一点？

谢谢 ：）

Answer 1

你必须$compile你的内部HTML像

 .directive('autotranslate', function($interpolate, $compile) { return function(scope, element, attr) { var html = element.html(); debugger; html = html.replace(/\[\[(\w+)\]\]/g, function(_, text) { return '<span translate="' + text + '"></span>'; }); element.html(html); $compile(element.contents())(scope); //<---- recompilation } }) 

Answer 2

下面是我开发的一个更通用的方法来解决这个问题：

 angular.module('kcd.directives').directive('kcdRecompile', function($compile, $parse) { 'use strict'; return { scope: true, // required to be able to clear watchers safely compile: function(el) { var template = getElementAsHtml(el); return function link(scope, $el, attrs) { var stopWatching = scope.$parent.$watch(attrs.kcdRecompile, function(_new, _old) { var useBoolean = attrs.hasOwnProperty('useBoolean'); if ((useBoolean && (!_new || _new === 'false')) || (!useBoolean && (!_new || _new === _old))) { return; } // reset kcdRecompile to false if we're using a boolean if (useBoolean) { $parse(attrs.kcdRecompile).assign(scope.$parent, false); } // recompile var newEl = $compile(template)(scope.$parent); $el.replaceWith(newEl); // Destroy old scope, reassign new scope. stopWatching(); scope.$destroy(); }); }; } }; function getElementAsHtml(el) { return angular.element('<a></a>').append(el.clone()).html(); } }); 

你这样使用它：

HTML

 <div kcd-recompile="recompile.things" use-boolean> <div ng-repeat="thing in ::things"> <img ng-src="{{::thing.getImage()}}"> <span>{{::thing.name}}</span> </div> </div> 

JavaScript的

 $scope.recompile = { things: false }; $scope.$on('things.changed', function() { // or some other notification mechanism that you need to recompile... $scope.recompile.things = true; }); 

编辑

如果你正在看这个，我会认真的推荐看看网站的版本，因为这可能是更新的。

Answer 3

这比@ Reza的解决scheme效果更好

 .directive('autotranslate', function() { return { compile: function(element, attrs) { var html = element.html(); html = html.replace(/\[\[(\w+)\]\]/g, function(_, text) { return '<span translate="' + text + '"></span>'; }); element.html(html); } }; }) 

当scope是所有子元素的范围时，Reza的代码工作。 但是，如果在这个指令的一个子节点中有一个ng控制器或其他的东西，那么就不能find这个范围variables。 但是，有了这个解决scheme^，它只是工作！