angular度ng-bind-html和它内的指令
Plunker链接
我有一个元素，我想绑定到它的HTML。
<div ng-bind-html="details" upper></div>
这样可行。 现在，随着它，我也有一个绑定到绑定的HTML的指令：
$scope.details = 'Success! <a href="#/details/12" upper>details</a>'
但是div和anchor的指令不会评估。 我如何使它工作？
我也遇到了这个问题，经过几个小时的search，我读了@Candermani的评论，这被certificate是解决scheme。 你需要用这个模式调用一个'compile'指令：
HTML：
<div compile="details"></div>
JS：
.directive('compile', ['$compile', function ($compile) { return function(scope, element, attrs) { scope.$watch( function(scope) { // watch the 'compile' expression for changes return scope.$eval(attrs.compile); }, function(value) { // when the 'compile' expression changes // assign it into the current DOM element.html(value); // compile the new DOM and link it to the current // scope. // NOTE: we only compile .childNodes so that // we don't get into infinite loop compiling ourselves $compile(element.contents())(scope); } ); }; }])
你可以在这里看到一个工作小提琴
感谢伟大的回答vkammerer。 我build议的一个优化是在编译运行一次之后就不要看着。 监视expression式中的$ eval可能会影响性能。
angular.module('vkApp') .directive('compile', ['$compile', function ($compile) { return function(scope, element, attrs) { var ensureCompileRunsOnce = scope.$watch( function(scope) { // watch the 'compile' expression for changes return scope.$eval(attrs.compile); }, function(value) { // when the 'compile' expression changes // assign it into the current DOM element.html(value); // compile the new DOM and link it to the current // scope. // NOTE: we only compile .childNodes so that // we don't get into infinite loop compiling ourselves $compile(element.contents())(scope); // Use un-watch feature to ensure compilation happens only once. ensureCompileRunsOnce(); } ); }; }]);
这是一个分叉和更新的小提琴。
添加这个指令angular-bind-html-compile
.directive('bindHtmlCompile', ['$compile', function ($compile) { return { restrict: 'A', link: function (scope, element, attrs) { scope.$watch(function () { return scope.$eval(attrs.bindHtmlCompile); }, function (value) { // Incase value is a TrustedValueHolderType, sometimes it // needs to be explicitly called into a string in order to // get the HTML string. element.html(value && value.toString()); // If scope is provided use it, otherwise use parent scope var compileScope = scope; if (attrs.bindHtmlScope) { compileScope = scope.$eval(attrs.bindHtmlScope); } $compile(element.contents())(compileScope); }); } }; }]);
像这样使用它：
<div bind-html-compile="data.content"></div>
真的很容易:)
不幸的是，我没有足够的评价。
我无法让这个工作多年。 我修改了我的ng-bind-html代码来使用这个自定义指令，但是我没有移除ng-bind-html工作所需的$scope.html = $sce.trustAsHtml($scope.html) 。 只要我删除这个，编译function开始工作。
对于任何处理已经通过$sce.trustAsHtml运行的内容的人来说，这是我不得不做的
function(scope, element, attrs) { var ensureCompileRunsOnce = scope.$watch(function(scope) { return $sce.parseAsHtml(attrs.compile)(scope); }, function(value) { // when the parsed expression changes assign it into the current DOM element.html(value); // compile the new DOM and link it to the current scope. $compile(element.contents())(scope); // Use un-watch feature to ensure compilation happens only once. ensureCompileRunsOnce(); }); }
这只是指令的link部分，因为我使用的是不同的布局。 您将需要注入$sce服务以及$compile 。
最好的解决scheme，我find了！ 我复制它，它的工作正如我所需要的。 谢谢，谢谢，谢谢…
在指令链接function我有
app.directive('element',function($compile){ . . var addXml = function(){ var el = $compile('<xml-definitions definitions="definitions" />')($scope); $scope.renderingElement = el.html(); } . .
并在指令模板中：
<span compile="renderingElement"></span>
