ডাটাবেস থেকে গতিশীল এইচটিএমএল স্ট্রিং সংকলন


132

পরিস্থিতি

আমাদের কৌণিক অ্যাপ্লিকেশনটির মধ্যে নেস্টেড হচ্ছে পৃষ্ঠা নামক একটি নির্দেশিকা, একটি নিয়ামক দ্বারা সমর্থিত, এতে এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ বৈশিষ্ট্যযুক্ত একটি ডিভ থাকে। এটি 'পেজকন্টেন্ট' নামে একটি $ স্কোপ ভারে বরাদ্দ করা হয়েছে। এই ভেরিটি একটি ডাটাবেস থেকে গতিময়ভাবে উত্পন্ন এইচটিএমএল নির্ধারিত হয়। যখন ব্যবহারকারী পরবর্তী পৃষ্ঠায় চলে যায়, তখন ডিবি-তে একটি কল করা হয় এবং পৃষ্ঠা কনটেন্ট ভেরিটি এই নতুন এইচটিএমএলে সেট করা থাকে যা এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ মাধ্যমে অনস্ক্রিনে রেন্ডার হয়ে যায়। কোডটি এখানে:

পৃষ্ঠার নির্দেশনা

angular.module('myApp.directives')
    .directive('myPage', function ($compile) {

        return {
            templateUrl: 'page.html',
            restrict: 'E',
            compile: function compile(element, attrs, transclude) {
                // does nothing currently
                return {
                    pre: function preLink(scope, element, attrs, controller) {
                        // does nothing currently
                    },
                    post: function postLink(scope, element, attrs, controller) {
                        // does nothing currently
                    }
                }
            }
        };
    });

পৃষ্ঠা নির্দেশের টেমপ্লেট (উপরে "টেমপ্লেট থেকে ইউরোপ সম্পত্তি থেকে" পেজ। Html ")

<div ng-controller="PageCtrl" >
   ...
   <!-- dynamic page content written into the div below -->
   <div ng-bind-html-unsafe="pageContent" >
   ...
</div>

পৃষ্ঠা নিয়ামক

angular.module('myApp')
  .controller('PageCtrl', function ($scope) {

        $scope.pageContent = '';

        $scope.$on( "receivedPageContent", function(event, args) {
            console.log( 'new page content received after DB call' );
            $scope.pageContent = args.htmlStrFromDB;
        });

});

ওই কাজগুলো. আমরা ডিবি থেকে পৃষ্ঠার এইচটিএমএলটি ব্রাউজারে দুর্দান্তভাবে রেন্ডার করে দেখি। যখন ব্যবহারকারী পরবর্তী পৃষ্ঠায় চলে আসে, আমরা পরবর্তী পৃষ্ঠার সামগ্রী এবং আরও দেখতে পাই। এ পর্যন্ত সব ঠিকই.

সমস্যাটি

এখানে সমস্যাটি হ'ল আমরা কোনও পৃষ্ঠার সামগ্রীর ভিতরে ইন্টারেক্টিভ সামগ্রী রাখতে চাই। উদাহরণস্বরূপ, এইচটিএমএলটিতে একটি থাম্বনেইল চিত্র থাকতে পারে যেখানে ব্যবহারকারী এটিতে ক্লিক করলে, কৌনিকটি দুর্দান্ত কিছু করা উচিত, যেমন একটি পপ-আপ মডেল উইন্ডো প্রদর্শন করা। আমি আমাদের ডাটাবেসে এইচটিএমএল স্ট্রিংগুলিতে কৌণিক পদ্ধতি কল (এনজি-ক্লিক) রেখেছি, তবে অবশ্যই কৌণিক কোনও পদ্ধতি কল বা নির্দেশকে স্বীকৃতি দেয় না যতক্ষণ না এটি কোনওভাবে এইচটিএমএল স্ট্রিংকে পার্স করে না, তাদেরকে স্বীকৃতি দেয় এবং সংকলন করে না।

আমাদের ডিবিতে

পৃষ্ঠা 1 এর জন্য সামগ্রী:

<p>Here's a cool pic of a lion. <img src="lion.png" ng-click="doSomethingAwesone('lion', 'showImage')" > Click on him to see a large image.</p>

পৃষ্ঠা 2 এর জন্য সামগ্রী:

<p>Here's a snake. <img src="snake.png" ng-click="doSomethingAwesone('snake', 'playSound')" >Click to make him hiss.</p>

পৃষ্ঠার নিয়ামকের পিছনে, আমরা এর পরে the স্কোপ ফাংশনটি যুক্ত করব:

পৃষ্ঠা নিয়ামক

$scope.doSomethingAwesome = function( id, action ) {
    console.log( "Going to do " + action + " with "+ id );
}

ডিবি থেকে এইচটিএমএল স্ট্রিংয়ের মধ্যে থেকে কীভাবে সেই 'doSomethingAwesome' পদ্ধতিটি কল করা যায় তা আমি বুঝতে পারি না। আমি বুঝতে পারি অ্যাঙ্গুলারকে এইচটিএমএল স্ট্রিংটি কোনওভাবে পার্স করতে হবে, তবে কীভাবে? আমি ile সংকলন পরিষেবা সম্পর্কে অস্পষ্ট মামুলি পড়েছি এবং কিছু উদাহরণ অনুলিপি করে আটকিয়েছি তবে কিছুই কার্যকর হয়নি। এছাড়াও, বেশিরভাগ উদাহরণগুলি নির্দেশের লিঙ্কিং পর্বের সময় গতিশীল সামগ্রী কেবল সেট হয়ে যাওয়া দেখায়। আমরা অ্যাপটি সারা জীবন পেজ বেঁচে থাকতে চাই। ব্যবহারকারী ক্রমাগত পৃষ্ঠাগুলির মধ্য দিয়ে উল্টে যাওয়ায় এটি ক্রমাগত নতুন সামগ্রী প্রাপ্ত, সংকলন এবং প্রদর্শন করে।

একটি বিমূর্ত অর্থে, আমি অনুমান করি আপনি বলতে পারেন যে আমরা একটি কৌণিক অ্যাপ্লিকেশনটির মধ্যে কৌণিকভাবে কৌণিকের নীড়ের অংশগুলি চেষ্টা করছি, এবং সেগুলি আউট এবং আউট করতে সক্ষম হওয়া প্রয়োজন।

আমি একাধিকবার অ্যাংুলার ডকুমেন্টেশনের বিভিন্ন বিট, পাশাপাশি সমস্ত প্রকারের ব্লগ পোস্ট এবং জেএস ফিডল্ডদের কোড সহ ফিড করেছি। আমি জানি না আমি কৌনিকটি পুরোপুরি ভুল বোঝাবুঝি করছি, বা কেবল সাধারণ কিছু অনুপস্থিত বা সম্ভবত আমি আস্তে আছি। যাই হোক না কেন, আমি কিছু পরামর্শ ব্যবহার করতে পারে।


2
ile সংকলন এবং এর চারপাশের ডক্স ব্লগগুলি আমার মনে হয় যে আমিও আস্তে আছি - যদিও আমার জেএসটি বেশ শক্তিশালী বলে মনে হয় - আমি মনে করি আমি যদি এটির সাথে আঁকড়ে ধরতে পারি তবে আমি একটি ইডিয়টস স্টাইল ব্লগ তৈরি করব - আমার বিশেষত্ব!
অবতরণ করেছে

উত্তর:


248

ng-bind-html-unsafeসামগ্রীটি কেবল HTML হিসাবে রেন্ডার করে। এটি ফলাফলকৃত ডোমের সাথে কৌনিক সুযোগকে আবদ্ধ করে না। $compileসেই উদ্দেশ্যে আপনাকে পরিষেবাটি ব্যবহার করতে হবে। আমি ব্যবহারকারীদের দ্বারা প্রবেশ করানো নির্দেশিকা রেন্ডারিং গতিশীল এইচটিএমএল তৈরি করতে এবং নিয়ন্ত্রণকারীর ক্ষেত্রের সাথে আবদ্ধ হওয়ার জন্য কীভাবে ব্যবহার করতে হয় তা প্রদর্শনের জন্য আমি এই প্লাঙ্কারটি$compile তৈরি করেছি। উত্স নীচে পোস্ট করা হয়।

demo.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Compile dynamic HTML</h1>
    <div ng-controller="MyController">
      <textarea ng-model="html"></textarea>
      <div dynamic="html"></div>
    </div>
  </body>

</html>

script.js

var app = angular.module('app', []);

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

function MyController($scope) {
  $scope.click = function(arg) {
    alert('Clicked ' + arg);
  }
  $scope.html = '<a ng-click="click(1)" href="#">Click me</a>';
}

6
অনেক ধন্যবাদ, বু! বৈশিষ্ট্য নির্দেশিকা তৈরি করা এবং স্কোপ ওয়াচ ফাংশন যুক্ত করা দুটি জিনিসই আমার অনুপস্থিত ছিল। এখন এটি কাজ করছে বলে অনুমান করুন, আমি হুডের নীচে কী চলছে তা আরও ভালভাবে বোঝার জন্য নির্দেশাবলী এবং $ সংকলনগুলি নিয়ে আবার পড়ব।
জিরাফ_সেনসে

11
আমিও! কৌণিক দল এটিতে ডক্সকে উন্নত করতে পারে do
ক্রেগ মরগান

$compile(ele.contents())(scope);- এই লাইনটি কৌণিক উপাদানগুলি গতিশীলভাবে যুক্ত করা হয়েছে তা সংকলন না করার বিষয়ে আমার সমস্যা সমাধান করেছে। ধন্যবাদ।
মিতাল প্রীতমণি

@ বুউনগুইয়েন টেপলেট ইউআরএল এর ভিতরে মনে করুন আপনি যদি এনজি-বাইন্ড-এইচটিএমএল ব্যবহার করে কিছু গতিশীল htmnl পৃষ্ঠা অন্তর্ভুক্ত করেন তবে কপাইল কাজটি কিছুটা অনিরাপদ বিষয়বস্তু থেকে ত্রুটি প্রদান করে ট্রাস্টএএসএইচটিএমএল কেবল অনিরাপদ ত্রুটি মুছে ফেলবে না, কোনও পরামর্শ?
আনাম

1
আমি এই উদাহরণটি পছন্দ করি তবে এটি আমার কাজ করে না। আমার কাছে একটি সুইচ স্টেটমেন্ট আছে যা ব্যবহারকারীর পছন্দের কারণে ঘটে তাই এর গতিশীল। তার উপর নির্ভর করে আমি নির্দেশাবলীযুক্ত এইচটিএমএল সন্নিবেশ করতে চাই। আমি যদি এটি প্রাকৃতিক বুটস্ট্র্যাপ পর্যায়ে রাখি তবে নির্দেশিকাটি কাজ করে। তবে আমার কাছে এটি কেবল গুলি চালানো নয় --- কেস 'তথ্য': $ স্কোপ। HtmlString = $ sce.trustAsHtml ('<ডিভ ডায়নামিক = "এইচটিএমটি স্ট্রিং"> ডিডিজেজ </ ডিভি>'); বিরতি; --- যখন আমি --- $ সংকলন ($ sce.trustAsHtml ('<div ডায়নামিক = "এইচটিএমএল স্ট্রিং"> dddzzz </div>')) এর মতো কিছু করতে চাই; কর্মক্ষেত্র ইত্যাদি সম্পর্কে কোনও ধারণা ...
অবতরণ করেছে

19

কৌণিক 1.2.10 তে লাইনটি scope.$watch(attrs.dynamic, function(html) {একটি অবৈধ অক্ষর ত্রুটি ফিরিয়েছিল কারণ এটি এর মানটি দেখার চেষ্টা করছিলattrs.dynamic এইচটিএমএল পাঠ্যের করছিল।

সুযোগ স্থিতি থেকে বৈশিষ্ট্য আনার মাধ্যমে আমি এটি স্থির করেছি

 scope: { dynamic: '=dynamic'}, 

আমার উদাহরণ

angular.module('app')
  .directive('dynamic', function ($compile) {
    return {
      restrict: 'A',
      replace: true,
      scope: { dynamic: '=dynamic'},
      link: function postLink(scope, element, attrs) {
        scope.$watch( 'dynamic' , function(html){
          element.html(html);
          $compile(element.contents())(scope);
        });
      }
    };
  });

হ্যালো, তাহলে আমি ব্যবহার element.html এটা আমার আসতে TypeError: নাল না ক্যান কল পদ্ধতি 'insertBefore'। সুতরাং কিছুটা গুগল করার পরে আমি দেখতে পেলাম যে আমার অবশ্যই এলিমেন্ট.অ্যাপেন্ড ব্যবহার করা উচিত তবে আমি যদি সেই নির্দেশটি একাধিক জায়গায় ব্যবহার করি - এটি বহুগুণ এইচটিএমএল উত্পন্ন করে। সুতরাং 2 নির্দেশাবলী 4 টি এইচটিএমএল কোড উত্পন্ন করে। আপনার উত্তরের জন্য ধন্যবাদ.
DzeryCZ

আমি আপনার জায়গায় অ্যাপেন্ড ব্যবহার করব না, আজ রাতের দিকে আমার একবার নজর থাকবে এবং আমি আপনার কাছে ফিরে আসব। সত্যি কথা বলতে, আমি কোনও নির্দেশ ছাড়াই এই পৃষ্ঠার বেশ কয়েকটি জায়গায় এই নির্দেশনাটি ব্যবহার করেছি। আমি সমস্যাটি পুনরুত্পাদন করার চেষ্টা করব এবং আমি আপনার কাছে ফিরে আসব।
আলেকজান্দ্রোস স্পাইরোপ্লোস

1
@ অ্যালেক্সানড্রোসএসপ্রোপলস আমি কেবল পরীক্ষা করে দেখেছি যে আমার কোডটি 1.2.12 দিয়ে ঠিক আছে। আমি মনে করি আপনি সম্ভবত এইচটিএমএলে <div ডায়নামিক = "এইচটিএমএল"> ঘোষণাটি মিস করেছেন? (এই ঘোষণার সাথে, $ ঘড়িটি 'এইচটিএমএল' সম্পত্তি স্কোপের দিকে লক্ষ্য করে, আপনার উল্লিখিত হিসাবে প্রকৃত এইচটিএমএল নয়, সুতরাং কোনও অবৈধ চর ত্রুটি হওয়া উচিত নয়)) যদি তা না হয় তবে আমাকে প্লাঙ্কার প্রেরণ করুন যা এটি কাজ করে না দেখায়, আমি 'দেখছি কি হয়েছে।
বুউ এনগুইন

তুমি সম্ভবত সঠিক. আমি তখন ফিরে প্রত্যাশা করে আসছি, এইচটিএমএল আসলে একটি পরিবর্তনশীল যা এইচটিএমএল: পি রয়েছে। আপনার নির্দেশিকাগুলিতে কোনও সুযোগ তৈরি করা ভাল তবে এটি ভাল ধারণা। umur.io/…
আলেকজান্দ্রোস

$compile(ele.contents())(scope);- এই লাইনটি কৌণিক উপাদানগুলি গতিশীলভাবে যুক্ত করা হয়েছে তা সংকলন না করার বিষয়ে আমার সমস্যা সমাধান করেছে। ধন্যবাদ।
মিতাল প্রীতমণি

5

একটি গুগল আলোচনার গোষ্ঠীতে পাওয়া গেছে। আমার জন্য কাজ কর.

var $injector = angular.injector(['ng', 'myApp']);
$injector.invoke(function($rootScope, $compile) {
  $compile(element)($rootScope);
});

3

তুমি ব্যবহার করতে পার

এনজি-বাইন্ড-এইচটিএমএল https://docs.angularjs.org/api/ng/service/$sce

গতিশীলভাবে এইচটিএমএলকে বাঁধাই করার নির্দেশনা। তবে আপনাকে $ দৃশ্য পরিষেবা দিয়ে ডেটা পেতে হবে।

দয়া করে লাইভ ডেমোটি http://plnkr.co/edit/k4s3Bx এ দেখুন

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
    $scope.getHtml=function(){
   return $sce.trustAsHtml("<b>Hi Rupesh hi <u>dfdfdfdf</u>!</b>sdafsdfsdf<button>dfdfasdf</button>");
   }
});

  <body ng-controller="MainCtrl">
<span ng-bind-html="getHtml()"></span>
  </body>

ধন্যবাদ! এটি আমাকে সাহায্য করেছিল। তবে আপনাকে এনজিএসিটাইজ এবং কৌণিক-স্যানিটাইজ.জেএস অন্তর্ভুক্ত করতে হবে:var myApp = angular.module('myApp', ['ngSanitize']);
জেগডসফট

এমডি-তালিকা স্প্যানের উপাদানগুলিকে বুটস্ট্র্যাপ আইকন
বাঁধাকালীন

1

এটিআরটির মাধ্যমে এইচটিএমএলকে বাধ্য করার জন্য নীচের কোডটি ব্যবহার করে দেখুন

.directive('dynamic', function ($compile) {
    return {
      restrict: 'A',
      replace: true,
      scope: { dynamic: '=dynamic'},
      link: function postLink(scope, element, attrs) {
        scope.$watch( 'attrs.dynamic' , function(html){
          element.html(scope.dynamic);
          $compile(element.contents())(scope);
        });
      }
    };
  });

এই উপাদানটি html (স্কোপ.ডিনামিক) ব্যবহার করে দেখুন; এলিমেন্টিএইচটিএমএল (অ্যাটারডিনামিক) এর চেয়ে;

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.