এর মধ্যে কৌনিক এনজি-বাইন্ড-এইচটিএমএল এবং নির্দেশিকা

Question 1

আমার একটি উপাদান রয়েছে যা আমি এটির সাথে html বাঁধতে চাই।

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

ওই কাজগুলো. এখন, এর সাথে আমার একটি নির্দেশিকাও রয়েছে যা আবদ্ধ এইচটিএমএল এর সাথে আবদ্ধ:

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

তবে upperডিভ এবং অ্যাঙ্কর সহ নির্দেশনা মূল্যায়ন করে না। আমি কীভাবে এটি কাজ করব?

Question 2

আমিও এই সমস্যার মুখোমুখি হয়েছি এবং ঘন্টার পর ঘন্টা ইন্টারনেট অনুসন্ধান করার পরে আমি @ চন্দমণির মন্তব্য পড়লাম, যা সমাধান হিসাবে প্রমাণিত হয়েছে। আপনাকে এই প্যাটার্নটির সাথে একটি 'সংকলন' নির্দেশিকা কল করতে হবে:

এইচটিএমএল:

<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 জন্য ধন্যবাদ। একটি অপ্টিমাইজেশন যা আমি সুপারিশ করব তা একবার সংকলন চলার পরে অন-নজর রাখা। Watch ঘড়ির অভিব্যক্তির মধ্যে alওয়ালটির পারফরম্যান্সের প্রভাব থাকতে পারে।

    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

এই নির্দেশিক কৌণিক-বাইন্ড-এইচটিএমএল-সংকলন যুক্ত করুন

.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)এনজি-বাইন্ড-এইচটিএমএল কাজ করার জন্য যা প্রয়োজন তা সরিয়ে ফেলতে আমি ব্যর্থ হয়েছি । আমি এটি মুছে ফেলার সাথে সাথেই কম্পাইল ফাংশনটি কাজ করা শুরু করে।

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>