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





angularjs-directive (6)


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

यहां एक कांटा और अद्यतन पहेली है।

प्लंकर लिंक

मेरे पास एक तत्व है जिसे मैं इसे HTML से जोड़ना चाहता हूं।

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

यह काम करता है। अब, इसके साथ ही मेरे पास एक निर्देश भी है जो बाध्य एचटीएमएल से बंधे हैं:

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

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




इस निर्देश 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>

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




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



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

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

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




स्थानांतरित करें: आपके निर्देश के टेम्पलेट तत्व के साथ आपके निर्देश में परिभाषित सभी तत्व जोड़ने का सही अर्थ है।

यदि स्थानांतरित करें: झूठी इन तत्वों को निर्देश के आपके अंतिम HTML में शामिल नहीं किया गया है, केवल निर्देश का टेम्पलेट प्रदान किया जाता है।

स्थानांतरित करें: तत्व का अर्थ है कि आपका निर्देश टेम्पलेट उपयोग नहीं किया गया है केवल आपके निर्देश में परिभाषित तत्व HTML के रूप में प्रस्तुत किया जाता है।

जब आप अपना निर्देश परिभाषित करते हैं तो यह ई तक सीमित होना चाहिए और जब आप इसे पृष्ठ पर जोड़ते हैं

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.




angularjs angularjs-directive