ng-bind-html เชิงมุมและคำสั่งภายใน

ลิงค์ Plunker

ฉันมีองค์ประกอบที่ฉันต้องการผูก html กับมัน

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

ที่ได้ผล ตอนนี้ฉันยังมีคำสั่งที่ผูกไว้กับ html ที่ถูกผูกไว้:

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

แต่คำสั่งที่upperมี div และ anchor จะไม่ประเมิน ฉันจะทำให้มันทำงานได้อย่างไร?

ฉันก็ประสบปัญหานี้เช่นกันและหลังจากผ่านไปหลายชั่วโมงค้นหาอินเทอร์เน็ตฉันอ่านความคิดเห็นของ @ 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);
            }
        );
    };
}])

คุณสามารถดูซอที่ใช้งานได้ที่นี่

ขอบคุณสำหรับคำตอบที่ดี 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();
            }
        );
    };
}]);

นี่คือซอที่แยกและปรับปรุงแล้ว

เพิ่มคำสั่ง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โค้ดเพื่อใช้คำสั่งที่กำหนดเองนี้ แต่ฉันไม่สามารถลบสิ่ง$scope.html = $sce.trustAsHtml($scope.html)ที่จำเป็นเพื่อให้ ng-bind-html ทำงานได้ ทันทีที่ฉันลบสิ่งนี้ฟังก์ชันคอมไพล์ก็เริ่มทำงาน

สำหรับใครก็ตามที่เกี่ยวข้องกับเนื้อหาที่ได้รับการดำเนินการแล้ว$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

ทางออกที่ดีที่สุดที่ฉันพบ! ฉันคัดลอกมาและทำงานได้ตรงตามที่ฉันต้องการ ขอบคุณขอบคุณขอบคุณ ...

ในฟังก์ชันลิงก์คำสั่งฉันมี

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

และในเทมเพลตคำสั่ง:

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