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

Question

मैं jQuery और AngularJS दोनों का उपयोग करके अजाक्स ऐप पर काम कर रहा हूं।

जब मैं jQuery के html फ़ंक्शन का उपयोग करके एक div की सामग्री (जिसमें 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 साथ एक div अंदर गतिशील सामग्री है और मैं एक ताज़ा करें बटन है कि सामग्री को अद्यतन होता है ताज़ा होने पर इस div का क्लिक किया जाता है। यदि मैं सामग्री को रीफ्रेश नहीं करता हूं तो वृद्धि की अपेक्षा की जाती है, लेकिन जब मैं रीफ्रेश करता हूं, तो AngularJS बाध्यकारी काम करना बंद कर देता है।

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

Answer 1

आपको डीओएम में डालने से पहले HTML स्ट्रिंग पर $compile पर कॉल करने की आवश्यकता है ताकि कोणीय को बाध्यकारी करने का मौका मिले।

आपके पहेली में, यह ऐसा कुछ दिखाई देगा। इस काम करने के लिए

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

जाहिर है, $compile अपने नियंत्रक में इंजेक्शन किया जाना चाहिए।

$compile documentation में और पढ़ें।

Answer 2

एक और समाधान मामले में आप नियंत्रण से अधिक गतिशील सामग्री

यह काम करता है अगर आप एक निर्देश (यानी। टिप्पणी की 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 बंडल आप मुसीबत में मिल जाएगा उपयोग कर रहे हैं जब आप को रिलीज़ मोड में तैनात। समस्या असीमित त्रुटि के रूप में आती है: [$ इंजेक्टर: unpr] जो कोणीय जावास्क्रिप्ट कोड के साथ minifier गड़बड़ाने के कारण होता है।

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

यहाँ जिस तरह से यह उपाय करने है।

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

इससे पहले कि मैंने इसे एक साथ पाई, इससे मेरे लिए बहुत दुख हुआ।

Answer 3

@ jwize के जवाब

क्योंकि angular.element(document).injector() त्रुटि injector is not defined तो, मैं बनाया है समारोह है कि आप AJAX कॉल के बाद चला सकते हैं या जब डोम 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') ;