পরিস্থিতি
আমাদের কৌণিক অ্যাপ্লিকেশনটির মধ্যে নেস্টেড হচ্ছে পৃষ্ঠা নামক একটি নির্দেশিকা, একটি নিয়ামক দ্বারা সমর্থিত, এতে এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ বৈশিষ্ট্যযুক্ত একটি ডিভ থাকে। এটি 'পেজকন্টেন্ট' নামে একটি $ স্কোপ ভারে বরাদ্দ করা হয়েছে। এই ভেরিটি একটি ডাটাবেস থেকে গতিময়ভাবে উত্পন্ন এইচটিএমএল নির্ধারিত হয়। যখন ব্যবহারকারী পরবর্তী পৃষ্ঠায় চলে যায়, তখন ডিবি-তে একটি কল করা হয় এবং পৃষ্ঠা কনটেন্ট ভেরিটি এই নতুন এইচটিএমএলে সেট করা থাকে যা এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ মাধ্যমে অনস্ক্রিনে রেন্ডার হয়ে যায়। কোডটি এখানে:
পৃষ্ঠার নির্দেশনা
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 সংকলন পরিষেবা সম্পর্কে অস্পষ্ট মামুলি পড়েছি এবং কিছু উদাহরণ অনুলিপি করে আটকিয়েছি তবে কিছুই কার্যকর হয়নি। এছাড়াও, বেশিরভাগ উদাহরণগুলি নির্দেশের লিঙ্কিং পর্বের সময় গতিশীল সামগ্রী কেবল সেট হয়ে যাওয়া দেখায়। আমরা অ্যাপটি সারা জীবন পেজ বেঁচে থাকতে চাই। ব্যবহারকারী ক্রমাগত পৃষ্ঠাগুলির মধ্য দিয়ে উল্টে যাওয়ায় এটি ক্রমাগত নতুন সামগ্রী প্রাপ্ত, সংকলন এবং প্রদর্শন করে।
একটি বিমূর্ত অর্থে, আমি অনুমান করি আপনি বলতে পারেন যে আমরা একটি কৌণিক অ্যাপ্লিকেশনটির মধ্যে কৌণিকভাবে কৌণিকের নীড়ের অংশগুলি চেষ্টা করছি, এবং সেগুলি আউট এবং আউট করতে সক্ষম হওয়া প্রয়োজন।
আমি একাধিকবার অ্যাংুলার ডকুমেন্টেশনের বিভিন্ন বিট, পাশাপাশি সমস্ত প্রকারের ব্লগ পোস্ট এবং জেএস ফিডল্ডদের কোড সহ ফিড করেছি। আমি জানি না আমি কৌনিকটি পুরোপুরি ভুল বোঝাবুঝি করছি, বা কেবল সাধারণ কিছু অনুপস্থিত বা সম্ভবত আমি আস্তে আছি। যাই হোক না কেন, আমি কিছু পরামর্শ ব্যবহার করতে পারে।