AngularJS + JQuery: অ্যাঙ্গুলারজে কীভাবে ডায়নামিক সামগ্রী কাজ করা যায়

Question 1

আমি jQuery এবং AngularJS উভয় ব্যবহার করে একটি অ্যাজাক্স অ্যাপে কাজ করছি।

আমি যখন jQuery এর htmlফাংশন ব্যবহার করে একটি ডিভের বিষয়বস্তু (যার মধ্যে AngularJS বাইন্ডিং রয়েছে) আপডেট করি , তখন AngularJS বাইন্ডিংগুলি কাজ করে না।

নীচে আমি যা করার চেষ্টা করছি তার কোডটি নিম্নরূপ:

$(document).ready(function() {
  $("#refreshButton").click(function() {
    $("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>")
  });
});

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id='dynamicContent'>
    <button ng-click="count = count + 1" ng-init="count=0">
        Increment
      </button>
    <span>count: {{count}} </span>
  </div>


  <button id='refreshButton'>
    Refresh
  </button>
</div>

স্নিপেট প্রসারিত করুন

আমার আইডি সহ একটি ডিভের ভিতরে ডায়নামিক সামগ্রী রয়েছে #dynamicContentএবং আমার একটি রিফ্রেশ বোতাম রয়েছে যা রিফ্রেশ ক্লিক করা হলে এই ডিভের বিষয়বস্তু আপডেট করে। বর্ধন প্রত্যাশার মতো কাজ করে যদি আমি বিষয়বস্তুকে রিফ্রেশ না করি তবে আমি রিফ্রেশ করার পরে, AngularJS বাঁধাই কাজ করা বন্ধ করে দেয়।

এটি অ্যাঙ্গুলারজেএসে বৈধ নাও হতে পারে তবে আমি প্রাথমিকভাবে jQuery দিয়ে অ্যাপ্লিকেশন তৈরি করেছি এবং পরে AngularJS ব্যবহার শুরু করেছি যাতে আমি AngularJS- তে সমস্ত স্থানান্তর করতে পারি না। অ্যাঙ্গুলারজেএস এ কাজ করার সাথে যে কোনও সহায়তা প্রশংসিত হয়।

Question 2

এটি আপনাকে $compileডিএমএমে প্রবেশের আগে এইচটিএমএল স্ট্রিংয়ে কল করতে হবে যাতে কৌণিকটি বাধ্যতামূলক সম্পাদন করার সুযোগ পায়।

আপনার কৌতুকগুলিতে এটি দেখতে এমন কিছু দেখাচ্ছে।

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

স্পষ্টতই, $compileএটি কাজ করার জন্য অবশ্যই আপনার নিয়ামককে ইনজেকশনের প্রয়োজন।

$compileডকুমেন্টেশন আরও পড়ুন ।

Question 3

ক্ষেত্রে আর একটি সমাধান আপনার গতিশীল সামগ্রীর উপর নিয়ন্ত্রণ না রাখে

আপনি যদি কোনও উপাদান নির্দেশের মাধ্যমে আপনার উপাদান লোড না করেন তবে এটি কাজ করে (উদাহরণস্বরূপ মন্তব্য করা jsfiddles এর উদাহরণে)।

আপনার সামগ্রী মোড়ানো

আপনার বিষয়বস্তুকে একটি ডিভের মধ্যে মোড়ক করুন যাতে আপনি JQuery ব্যবহার করছেন তবে আপনি এটি নির্বাচন করতে পারেন । আপনি নিজের উপাদানটি পেতে দেশীয় জাভাস্ক্রিপ্ট ব্যবহার করার বিকল্প বেছে নিয়েছেন।

<div class="selector">
    <grid-filter columnname="LastNameFirstName" gridname="HomeGrid"></grid-filter>
</div>

কৌণিক ইনজেক্টর ব্যবহার করুন

আপনি যদি না থাকে তবে ile সংকলনের রেফারেন্স পেতে নিম্নলিখিত কোডটি ব্যবহার করতে পারেন।

$(".selector").each(function () {
    var content = $(this);
    angular.element(document).injector().invoke(function($compile) {
        var scope = angular.element(content).scope();
        $compile(content)(scope);
    });
});

সারসংক্ষেপ

মূল পোস্টটি মনে হচ্ছে আপনার কাছে একটি ile সংকলন রেফারেন্স সহজলভ্য। আপনার রেফারেন্স থাকলে স্পষ্টতই সহজ, তবে আমি তা করি না তবে এটি আমার পক্ষে উত্তর ছিল।

পূর্ববর্তী কোডের একটি ক্যাভেট

আপনি যদি মিনিপিং দৃশ্যের সাথে একটি এসপ নেট / এমভিসি বান্ডেল ব্যবহার করছেন তবে আপনি যখন রিলিজ মোডে স্থাপন করবেন তখন আপনি সমস্যায় পড়বেন। সমস্যাটি আনচাক্ট ত্রুটির আকারে আসে: [ject ইনজেক্টর: আনআরপিআর] যা কৌনিক জাভাস্ক্রিপ্ট কোডের সাথে মাইনফায়ার করে মেসিংয়ের কারণে ঘটে।

এটির প্রতিকারের উপায় এখানে :

নিম্নলিখিত ওভারলোডের সাথে প্রচলিত কোড স্নিপেটটি প্রতিস্থাপন করুন।

...
angular.element(document).injector().invoke(
[
    "$compile", function($compile) {
        var scope = angular.element(content).scope();
        $compile(content)(scope);
    }
]);
...

এটি একসাথে বেঁধে দেওয়ার আগে এটি আমার জন্য প্রচুর শোক করেছিল।

Question 4

@ Jwize এর উত্তরে যুক্ত করুন

কারণ angular.element(document).injector()ত্রুটি দিচ্ছিল injector is not defined তাই, আমি এমন ফাংশন তৈরি করেছি যা আপনি এজেএক্স কলের পরে চালাতে পারেন বা যখন ডকুমটি jQuery ব্যবহার করে পরিবর্তন করা হবে।

  function compileAngularElement( elSelector) {

        var elSelector = (typeof elSelector == 'string') ? elSelector : null ;  
            // The new element to be added
        if (elSelector != null ) {
            var $div = $( elSelector );

                // The parent of the new element
                var $target = $("[ng-app]");

              angular.element($target).injector().invoke(['$compile', function ($compile) {
                        var $scope = angular.element($target).scope();
                        $compile($div)($scope);
                        // Finally, refresh the watch expressions in the new element
                        $scope.$apply();
                    }]);
            }

        }

কেবলমাত্র নতুন উপাদান নির্বাচকের পাস করে এটি ব্যবহার করুন। এটার মত

compileAngularElement( '.user' ) ;