angularjs - Angular ng-bind-html 和其中的指令

Question

Plunker 链接

我有一个元素，我想将 html 绑定到它。

<div ng-bind-html="details" upper></div>

这样可行。现在，连同它，我还有一个绑定到绑定 html 的指令：

$scope.details = 'Success! <a href="#/details/12" upper>details</a>'

但是带有 div 和 anchor 的指令upper不评估。我如何使它工作？

Answer 1

我也面临这个问题，在互联网上搜索了几个小时后，我阅读了@Chandermani 的评论，这被证明是解决方案。您需要使用此模式调用“编译”指令：

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);
            }
        );
    };
}])

你可以在这里看到它的工作小提琴

Answer 2

感谢 vkammerer 的出色回答。我建议的一项优化是在编译运行一次后不观看。监视表达式中的 $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();
            }
        );
    };
}]);

这是一个分叉和更新的小提琴。

Answer 3

添加此指令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>

真的很容易:)

Answer 4

不幸的是，我没有足够的声誉发表评论。

我无法让它工作很长时间。我修改了我的ng-bind-html代码以使用此自定义指令，但我未能删除$scope.html = $sce.trustAsHtml($scope.html)ng-bind-html 工作所需的指令。一旦我删除它，编译功能就开始工作了。

Answer 5

对于任何处理已经在$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.

Answer 6

我发现的最佳解决方案！我复制了它，它完全符合我的需要。谢谢，谢谢，谢谢...

在指令链接功能中我有

app.directive('element',function($compile){
  .
  .
     var addXml = function(){
     var el = $compile('<xml-definitions definitions="definitions" />')($scope);
     $scope.renderingElement = el.html();
     }
  .
  .

在指令模板中：

<span compile="renderingElement"></span>