कोणीय एनजी-बाइंड-html और इसके भीतर निर्देश

Question 1

मेरे पास एक तत्व है जो मैं इसे html को बांधना चाहूंगा।

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

यह काम करता है। अब, इसके साथ मेरे पास एक निर्देश भी है जो बाध्य HTML से जुड़ा है:

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

लेकिन upperडिव और एंकर के साथ निर्देश का मूल्यांकन नहीं होता है। मैं इसे काम करने लायक कैसे बनाऊ?

Question 2

मैं भी इस समस्या का सामना कर रहा था और घंटों इंटरनेट पर सर्च करने के बाद मैंने @ चंद्रमणि की टिप्पणी पढ़ी, जो समाधान साबित हुई। आपको इस पैटर्न के साथ एक 'संकलन' निर्देश कॉल करने की आवश्यकता है:

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

आप इसका एक कामकाजी फ़लक यहाँ देख सकते हैं

Question 3

महान उत्तर 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();
            }
        );
    };
}]);

यहाँ एक कांटा और अपडेटेड फिडेल है।

Question 4

इस निर्देश कोणीय को बांधें- html-संकलित करें

.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>

वास्तव में आसान :)

Question 5

दुर्भाग्य से मेरे पास टिप्पणी करने के लिए पर्याप्त प्रतिष्ठा नहीं है।

मुझे यह उम्र भर काम करने के लिए नहीं मिला। मैंने ng-bind-htmlइस कस्टम निर्देश का उपयोग करने के लिए अपने कोड को संशोधित किया , लेकिन मैं उसे हटाने में विफल रहा $scope.html = $sce.trustAsHtml($scope.html)जो काम करने के लिए एनजी-बाइंड-html के लिए आवश्यक था। जैसे ही मैंने इसे हटा दिया, संकलन कार्य शुरू हो गया।

Question 6

किसी ऐसी सामग्री से निपटने के लिए जो पहले से ही $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।

Question 7

सबसे अच्छा समाधान जो मैंने पाया है! मैंने इसे कॉपी किया और यह ठीक वैसे ही काम करता है जैसा मुझे चाहिए था। धन्यवाद, धन्यवाद, धन्यवाद ...

निर्देशन लिंक फ़ंक्शन में मेरे पास है

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

और निर्देशक टेम्पलेट में:

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