AngularJS + JQuery: कोणीयज में काम करने वाली गतिशील सामग्री कैसे प्राप्त करें

Question 1

मैं jQuery और AngularJS दोनों का उपयोग करके एक Ajax ऐप पर काम कर रहा हूं।

जब मैं 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 बाइंडिंग काम करना बंद कर देती है।

यह AngularJS में मान्य नहीं हो सकता है, लेकिन मैंने शुरुआत में jQuery के साथ एप्लिकेशन बनाया और बाद में AngularJS का उपयोग करना शुरू कर दिया, इसलिए मैं AngularJS को सब कुछ माइग्रेट नहीं कर सकता। AngularJS में इस काम को पाने के लिए किसी भी मदद की बहुत सराहना की जाती है।

Question 2

$compileDOM में डालने से पहले आपको HTML स्ट्रिंग पर कॉल करना होगा ताकि कोणीय को बाइंडिंग करने का मौका मिले।

अपनी बेला में, यह कुछ इस तरह दिखेगा।

$("#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 में उदाहरण की तरह)।

अपनी सामग्री लपेटें

अपनी सामग्री को एक div में लपेटें ताकि आप JQuery का उपयोग करते समय इसे चुन सकें । आप अपने तत्व को प्राप्त करने के लिए देशी जावास्क्रिप्ट का उपयोग करने का विकल्प भी चुनते हैं।

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

कोणीय इंजेक्टर का उपयोग करें

यदि आपके पास एक नहीं है, तो आप $ संकलित करने के लिए एक संदर्भ प्राप्त करने के लिए निम्न कोड का उपयोग कर सकते हैं।

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

सारांश

मूल पोस्ट को लगता है कि आपके पास एक $ संकलन संदर्भ काम था। यह स्पष्ट रूप से आसान है जब आपके पास संदर्भ है, लेकिन मैंने ऐसा नहीं किया मेरे लिए यह जवाब था।

पिछले कोड का एक कैविएट

यदि आप मिनिफाइ परिदृश्य के साथ एक asp.net/mvc बंडल का उपयोग कर रहे हैं, तो आपको रिलीज़ मोड में तैनात करने पर परेशानी होगी। यह समस्या अनकाउटेड एरर के रूप में सामने आती है: [$ इंजेक्टर: अनप्र] जो कि मिनिमिफायर को कोणीय जावास्क्रिप्ट कोड के साथ गड़बड़ करने के कारण होता है।

यहाँ यह उपाय करने का तरीका है :

प्रचलित कोड स्निपेट को निम्न अधिभार के साथ बदलें।

...
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 , इसलिए, मैंने फ़ंक्शन बनाया है जिसे आप AJAX कॉल के बाद चला सकते हैं या जब DOM को 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' ) ;