角ng-绑定-html及其内的指令

Question

角ng-绑定-html及其内的指令柱塞连杆我有一个元素，我想将html绑定到它。<div ng-bind-html="details" upper></div>这很管用。现在，除了它，我还有一个绑定到绑定html的指令：$scope.details = 'Success! <a href="#/details/12" upper>details</a>'但指令upper对DIV和锚不要进行评估。我该怎么做呢？

Answer 1

我也面临着这个问题，在网上搜索了几个小时后，我看到了@Chandermani的评论，这被证明是解决问题的方法。您需要用以下模式调用一个“编译”指令：

HTML：

<div compile="details"></div>

联署材料：

.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

谢谢你的回答。我建议的一个优化是在编译运行一次之后不进行监视。Watch表达式中的$val可能会对性能产生影响。

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

这是一把叉子和更新的小提琴。