कोणीय - एनजी-अगर - एनजी के बाद कॉलबैक कैसे करें- अगर टेम्पलेट को

Question

एंगुलर में प्रस्तुत किया गया है, तो मुझे कुछ वर्ग के साथ तत्व के बाद एक फ़ंक्शन कॉल करने की आवश्यकता है। तत्व का प्रदर्शन ng-if = 'expr' के माध्यम से नियंत्रित किया जाता है। कुछ AJAX कॉल के जवाब देने के बाद $ scope.expr का मान सेट किया गया है।

अब, अगर मैं expr पर $ watch डालने का प्रयास करता हूं, या $ evalAsync का उपयोग करता हूं। यह काम नहीं कर रहा है। शायद कारण यह है कि टेम्पलेट भाग वास्तव में चलने से पहले ये घटनाएं चलती हैं।

यहां एक नमूना कोड है: http://jsbin.com/kuyas/1/edit यहां मुझे एनजी पर कॉलबैक प्रकार की चीज़ चाहिए- अगर टेम्पलेट के बाद इसे निष्पादित किया जाता है।

Answer 1

समस्या यह थी कि पाचन लूप के साथ कोणीय किया जाता है या नहीं, यह सुनिश्चित करने का कोई तरीका नहीं है कि सभी तत्व प्रस्तुत किए गए हैं।

इस समस्या को हल करने के लिए, वहाँ दो विकल्प

1. थे एक निर्देश में अपने कॉलबैक समारोह लपेटें। एनजी-अगर में निर्देश शामिल करें। और उस अभिव्यक्ति को केवल तभी सही बनाएं जब आप अपना कॉलबैक निष्पादित करना चाहते हों।
2. setTimeOut(function(){ ... }, 0); के अंदर अपने कॉलबैक फ़ंक्शन को कॉल करें, डिफ़ॉल्ट रूप से ब्राउज़रों के रूप में सभी ईवेंट को कतार में रखें, इसलिए, जब पाचन पाइप चल रहा है, तो आपका कॉलबैक फ़ंक्शन कतार में प्रवेश करेगा और जल्द ही पाचन लूप खत्म हो जाएगा। मेरे विचार में

Answer 2

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

क्या आप वही चाहते हैं जो आप चाहते हैं?

Answer 3

सरल समाधान के लिए निम्न कार्य करने के लिए है: केवल जब क्या ng-if से प्रभावित होता है प्रदान की गई कर दिया गया है

<div ng-if="sectionActivated"> 
    <div ng-init="callBack()"></div> 
</div> 

आपका कॉलबैक बुलाया जाएगा।

Answer 4

निर्देश कुछ इस तरह दिखाई दे सकता है:

import * as angular from 'angular'; 

class OnFinishRenderDirective implements angular.IDirective { 

    public restrict = 'A'; 
    public replace = false; 

    public link = (
    scope: any, 
    // scope:  angular.IScope, 
    element: angular.IAugmentedJQuery, 
    attr: any, 
    modelCtrl: any, 
    link: angular.ITemplateLinkingFunction) => { 

    if (scope.$last === true) { 
     this.$timeout(() => { 
     scope.$emit('elementRendered'); 
     }); 
    } 

    } 

    constructor(private $timeout: angular.ITimeoutService) { } 

} 

export function onFinishRenderFactory(): angular.IDirectiveFactory { 

    var directive = ($timeout: angular.ITimeoutService) => new OnFinishRenderDirective($timeout); 
    directive.$inject = [ '$timeout' ]; 
    return directive; 
} 

आप इसे आयात करने के लिए है और आप अपने मॉड्यूल को जोड़ना होगा

import { onFinishRenderFactory } from './onFinishRender/onFinishRender.directive'; 

angular.module('yourModule', []) 
.directive('onFinishRender', onFinishRenderFactory()) 

तो फिर तुम निर्देश कहीं अपने मार्कअप में फेंकना उपयोग कर सकते हैं घटना जब निर्देश दिया गया है।

<div onFinishRender>I am rendered</div> 

तुम भी निर्देश DIV है जिसे आप लिंक समारोह में ATTR वस्तु से हड़पने के लिए और अपने $ करने के लिए जोड़ सकते हैं इस विशिष्ट DIV प्रदान करने की पहचान करने के लिए समारोह का उत्सर्जन में एक अतिरिक्त विशेषता जोड़ सकते हैं।

क्या यह आपके प्रश्न का उत्तर देता है?