कोणीय जेएस: प्रस्तुत करने के बाद कॉलबैक (प्रस्तुत करने के बाद डोम के साथ काम करें)

Question

टेम्पलेट प्रस्तुत करने के बाद $scope.myWork() विधि कैसे चला सकता है? मैं $scope.value सेट करना चाहता हूं और उसके बाद मुझे JQuery के साथ कुछ बदलना होगा (उदाहरण के लिए। टेम्पलेट सामग्री के DOM में)। $scope.$watch('value', function(){....}) "पहले" प्रस्तुत करना काम कर रहा है (टेम्पलेट का डोम अभी तक उपलब्ध नहीं है)। धन्यवाद।

Answer 1

directive बनाएं जो लिंक फ़ंक्शन में आपका कोड चलाता है। टेम्पलेट के निर्माण के बाद लिंक फ़ंक्शन को कॉल किया जाता है।

एक विचार प्राप्त करने के लिए ng-click देखें।

Answer 2

मैं एक विशेषता निर्देश में terminal और transclude उपयोग करने के बाद एक मॉडल अद्यतन किया जाता है और देखने प्रदान की गई है एक scoped विधि कॉल करने के (मेरे मामले में एक $ Resource.query के बाद एक iframe आकार बदलने के लिए):

.directive('postRender', [ '$timeout', function($timeout) { 
var def = { 
    restrict : 'A', 
    terminal : true, 
    transclude : true, 
    link : function(scope, element, attrs) { 
     $timeout(scope.resize, 0); //Calling a scoped method 
    } 
}; 
return def; 
}]) 

$ टाइमआउट काला जादू है। यह जेएस विधि को विशेषता मान के रूप में घोषित करना संभव है और $ इसे पार्स करना संभव है।

तो मैं एक ng-repeat में इसका इस्तेमाल करते हैं (मेरे मामले एक पेड़ रिकर्सिवली प्रदान की गई है में):

<div post-render ng-repeat="r in regions | orderBy:'name'" ng-include="'tree_region_renderer.html'"> 

Answer 3

जेन्स जवाब ऊपर काम करेंगे, लेकिन ध्यान दें कि नए AngularJS संस्करण पर (उदाहरण के 1.2.3 के लिए) आप उस पोस्ट पर गुणों के रूप में एनजी-दोहराने के साथ संयोजन में पोस्टरेंडर निर्देश नहीं हो सकता है क्योंकि दोनों ने स्थानांतरित किया है: सत्य। उस स्थिति में आपको या तो पोस्टरेंडर निर्देश विशेषता के साथ ट्रांसफर को अलग करना होगा या अलग टैग होना चाहिए।
टर्मिनल का उपयोग करते समय विशेषताओं की प्राथमिकता के बारे में भी जागरूक रहें: सच है क्योंकि आप एक ही टैग पर उच्च प्राथमिकता वाले एक के कारण एक विशेषता गैर-प्रभावी होने का अंत कर सकते हैं।

Answer 4

मुझे यह समस्या भी थी, अन्य समाधान मेरे लिए अच्छा काम नहीं करते थे, और ऐसा लगता है कि प्रोटैक्टर को हल किया जाना चाहिए। Protractor's client-side scripts की एक त्वरित समीक्षा से पता चलता है कि यह वास्तव में परीक्षण चलाने के लिए angular.getTestability(element) का उपयोग करता है। विधि तब तक प्रतीक्षा करती है जब तक लंबित टाइमआउट या http अनुरोध न हों और फिर आपका कॉलबैक चलाएं। यहां मेरा निर्देश है:

export function afterRender ($timeout) { 
"ngInject"; 
    return { 
     restrict: 'A', 
     terminal: true, 
     link: function (scope, element, attrs) { 
     angular.getTestability(element).whenStable(function() { 
      console.log('[rendered]'); 
     }); 
     } 
    }; 
} 

Answer 5

मुझे यह पृष्ठ मिला जब DOM प्रतिपादन प्रोफ़ाइल के लिए एक तरीका ढूंढ रहे थे। मुझे एक बहुत ही सरल समाधान मिला जो मेरे उपयोग के मामले में काम कर रहा है।

डीओएम तत्व में और हैंडलर फ़ंक्शन में एनजी-इनिट हैंडलर संलग्न करें, निष्पादन उत्पन्न करने के लिए $ टाइमआउट का उपयोग करें। उदाहरण:

HTML:

<div ng-init="foo()"> 

जे एस:

$scope.foo = function() { 
    $timeout(function() { 
     // This code runs after the DOM renders 
    }); 
});