सामग्री लोड होने के बाद कॉल करने के लिए AngularJs घटना

Question

मेरे पास एक फ़ंक्शन है जिसे मैं पृष्ठ सामग्री लोड होने के बाद कॉल करना चाहता हूं। मैंने $ viewContentLoaded के बारे में पढ़ा और यह मेरे लिए काम नहीं करता है। मैं कुछ इस तरह की तलाश में हूं

document.addEventListener('DOMContentLoaded', function () { 
     //Content goes here 
}, false);

उपरोक्त कॉल मेरे लिए AngularJs कंट्रोलर में काम नहीं करता है।

Comments

यह अच्छी तरह से काम करता है stackoverflow.com/q/14968690/6521116

— क्रिश रूफ

Answer 1

$ ViewContentLoaded के प्रलेखन के अनुसार , यह काम करने वाला था

हर बार उत्सर्जित सामग्री को फिर से लोड किया जाता है।

$viewContentLoaded ईवेंट उत्सर्जित होता है जिसका अर्थ है कि इस ईवेंट को प्राप्त करने के लिए आपको एक पेरेंट कंट्रोलर की आवश्यकता है

<div ng-controller="MainCtrl">
  <div ng-view></div>
</div>

से MainCtrlआप घटना सुन सकते हैं

  $scope.$on('$viewContentLoaded', function(){
    //Here your view content is fully loaded !!
  });

डेमो की जाँच करें

Comments

इस दृष्टिकोण के साथ समस्या यह है कि नियंत्रकों ने इस बिंदु पर पूरी तरह से प्रारंभ नहीं किया है।

— ऐश ब्लू

@ रेज़ा सही है, इस घटना को निकाल दिया जाता है जब डोम को जोड़ा जाता है लेकिन इससे पहले कि कोणीय ने डोम को संसाधित करना समाप्त कर दिया है। आप कोणीय चर के रूप में एक आईडी या वर्ग जोड़कर इसका परीक्षण कर सकते हैं और इसे jQuery के साथ $ viewContentLoaded में खोजने का प्रयास कर सकते हैं। तुम पाओगे नहीं।

— थॉमस केकेसेन

@ रेज़ा हाँ, थॉमस सही है, तत्व तत्व $ व्यू के अंदर प्रवेश नहीं कर सकता फेंक देंगे "TypeError: अपरिभाषित की संपत्ति 'तत्वनाम नहीं पढ़ सकते हैं"

— मुसम्मिल

वही $ रूटस्कॉप स्तर पर बुलाया जा सकता है। $ गुंजाइश के बजाय। $ पर, यह $ rootScope होना चाहिए। $ on और app.run के अंदर () ब्लॉक

— Vil

यह विकल्प काम नहीं करेगा जब आपके पास ng-repeatऔर कई नेस्टेड निर्देश होंगे जो जटिल छोरों और स्थितियों के आधार पर HTML / सामग्री उत्पन्न करेंगे। $viewContentLoadedघटना शुरू होने के बाद भी कुछ समय के लिए रेंडरिंग जारी रहता है। आप यह कैसे सुनिश्चित कर सकते हैं कि सभी तत्वों को पूरी तरह से प्रदान किया गया है फिर कुछ कोड निष्पादित करें? कोई प्रतिपादन?

— तारेकह

Answer 2

कोणीय <1.6.X

angular.element(document).ready(function () {
    console.log('page loading completed');
});

कोणीय> = 1.6.X

angular.element(function () {
    console.log('page loading completed');
});

Comments

क्या यह app.js के भीतर जाता है?

— zcoon

आप इसे अपने नियंत्रकों में सुन सकते हैं।

— js

मुख्य app.js फ़ाइल में भी ठीक काम करता है।

— लॉबोट

वह जवाब मेरे लिए काम करता है! बस देखना है कि प्रलेखन तत्व पृष्ठ पर '(बजाय angular.element (दस्तावेज़ के पदावनत, उपयोग angular.element (कॉलबैक)) .ready (कॉलबैक)) तैयार ()'

— Lovera

इसने मेरे लिए काम किया। स्वीकृत उत्तर दृष्टिकोण नियंत्रक के अंदर काम नहीं करता है।

— Fabiano

Answer 3

तय - 2015.06.09

एक निर्देश और कोणीय तत्व readyविधि का उपयोग करें जैसे:

js

.directive( 'elemReady', function( $parse ) {
   return {
       restrict: 'A',
       link: function( $scope, elem, attrs ) {    
          elem.ready(function(){
            $scope.$apply(function(){
                var func = $parse(attrs.elemReady);
                func($scope);
            })
          })
       }
    }
})

एचटीएमएल

<div elem-ready="someMethod()"></div>

या कंट्रोलर- सिंटैक्स के रूप में उपयोग करने वालों के लिए ...

<div elem-ready="vm.someMethod()"></div>

इसका लाभ यह है कि आप अपनी पसंद के अनुसार व्यापक या दानेदार w / अपने यूआई हो सकते हैं और अपने नियंत्रकों से डोम तर्क को हटा रहे हैं। मेरा तर्क है कि यह अनुशंसित कोणीय तरीका है।

यदि आपके पास एक ही नोड पर अन्य निर्देश हैं, तो आपको इस निर्देश को प्राथमिकता देने की आवश्यकता हो सकती है।

Comments

यह वास्तव में एक अच्छा समाधान की तरह दिखता है, लेकिन मैं इसे काम नहीं कर सका। यह elem.ready( $scope.$apply( readyFunc( $scope ))); किसी भी विचार पर घुट रहा है कि ऐसा क्यों हो सकता है? शायद कोणीय का एक अद्यतन हुआ? वैसे भी - यह एक सुंदर दृष्टिकोण है, अगर यह काम कर सकता है।

— डोमारिगैटो

एनएम, मैं देख रहा हूँ कि मुद्दा क्या था। पर एक टाइपो था attrs.onReady, होना चाहिए जो अब है। दूसरा मुद्दा यह था कि मैं इसे फंकी कह रहा था। .... मुझे स्मृति से जेएस में कॉफ़ीस्क्रिप्ट को परिवर्तित करने के लिए क्या मिलता है।

— जुसोपी

मुझे लगता है कि कुछ मामलों में यह ठीक हो सकता है, लेकिन इसके खिलाफ मेरी दलीलें हैं: मुझे लगता है कि उसके कोड की उम्मीदें जब सिर्फ झलकती है कि डोम में प्रदर्शित करने के लिए कुछ पाठ मान लौटाएंगे, तो उसे सावधानीपूर्वक आंख की आवश्यकता होती है; यह निर्देशकीय प्राथमिकता के संदर्भ में किसी भी समय की अनुमति नहीं देता है, आप नियंत्रक स्तर पर अटक जाते हैं जब तक आप उपयोग नहीं करते हैं $timeout; आप स्पष्ट रूप से एक ऐड्ट बना रहे हैं। डोम नोड बस गैर-डोम तर्क को निष्पादित करने के लिए; यह केवल पुन: प्रयोज्य है यदि वह तरीका $ स्कोप पदानुक्रम में दूर तक रहता है जैसे कि बच्चे को यह विरासत मिली, मुझे लगता है कि यह एक एनजी परिप्रेक्ष्य में बुरा लगता है;

— जुसोपी

$timeout(function() {})चारों ओर जोड़ने के बाद मेरे लिए काम किया elem.ready()। अन्यथा यह एक $digest already in progressत्रुटि फेंक रहा था । लेकिन वैसे भी, एक टन धन्यवाद! मैं पिछले एक घंटे से इससे जूझ रहा हूं।

— rrrishnan

$ स्कोप के माध्यम से खुदाई खाली दिखाई देती है। कोई विचार?

— MiloTheGreat 12

Answer 4

आप सीधे इसे जोड़कर कॉल कर सकते हैं {{YourFunction()}}HTML एलिमेंट के बाद ।

यहाँ एक है Plunker Link।

Comments

क्या आप कृपया अपने समाधान के बारे में थोड़ा और विवरण जोड़कर अपने उत्तर को विस्तृत कर सकते हैं?

— '12

मुझे लगता है कि आप एक फ़ंक्शन को कॉल करना चाहते हैं जब html तत्व लोड होता है। तो उस फ़ंक्शन को ऊपर बताए अनुसार कॉल करें। यदि मेरा अनुमान आपके संदेह के बारे में सही है तो यह काम करेगा अन्यथा कृपया अपने प्रश्न को विस्तृत करें। :)

— नीला

जब इस तरह एक समारोह बुला रहा है। सुनिश्चित करें कि एक बार इसका आह्वान किया गया है या अन्यथा पाचन चक्र अनंत चलेगा और एक त्रुटि

— दिखाएगा

मुझे यह समाधान पसंद है, यह वास्तव में इतना सरल है

— कामुरन सोंसेक

यह शानदार है - केवल एक समस्या। ऐसा प्रतीत होता है कि मेरा फ़ंक्शन 5 बार चलता है जब मैं इसका उपयोग करता हूं। मैंने एक काउंटर जोड़ा तो यह ठीक काम कर रहा है, लेकिन मैं सोच रहा हूं कि अगर कोई जानता है कि ऐसा क्यों होगा ... तो थोड़ा अजीब लगता है आपको पता है?

— itchyspacesuit

Answer 5

मुझे Google चार्ट के साथ काम करते हुए इस तर्क को लागू करना था। मैंने क्या किया था कि नियंत्रक परिभाषा के अंदर मेरे html के अंत में मैंने जोड़ा।

  <body>
         -- some html here -- 
--and at the end or where ever you want --
          <div ng-init="FunCall()"></div>
    </body>

और उस कार्य में बस अपने तर्क कहते हैं।

$scope.FunCall = function () {
        alert("Called");
}

Comments

मैं इसका उपयोग कर रहा था, लेकिन पृष्ठ के शीर्ष पर, init को कुछ div की आवश्यकता होती है ताकि पहले से ही लोड किया जा सके, इसलिए ng-init को पृष्ठ के निचले भाग में ले जाकर मेरे मुद्दे, अच्छी टिप को ठीक किया और यह समझ में आता है।

— गुरुनानक

केवल वही उत्तर जिसने मेरी समस्या (jquery मोबाइल खाली चयन) में मेरी मदद की

— kaiser

यह वास्तविक उत्तर है क्योंकि यह गतिशील रूप से लोड किए गए नियंत्रणों के अनुरूप है और इसे लागू करने के लिए सुपर आसान है।

— जेसन सेब्रिंग

इस उत्तर ने मुझे कुछ समय बचाया, मेरे प्रयोग के मामले के लिए बहुत ही सुरुचिपूर्ण और प्रभावी

— सेलो

Answer 6

var myM = angular.module('data-module');

myM.directive('myDirect',['$document', function( $document ){

    function link( scope , element , attrs ){

        element.ready( function(){

        } );

        scope.$on( '$viewContentLoaded' , function(){

            console.log(" ===> Called on View Load ") ;

        } );

    }

    return {
        link: link
    };

}] );

ऊपर से विधि ने मेरे लिए काम किया

Answer 7

आप कोणीय js में जावास्क्रिप्ट घटना को onload घटना कह सकते हैं। यह एनजी-लोड ईवेंट किसी भी डोम तत्व जैसे डिव, स्पैन, बॉडी, आईफ्रेम, इमग आदि पर लागू किया जा सकता है, जो आपके मौजूदा प्रोजेक्ट में एनजी-लोड जोड़ने के लिए लिंक है।

कोणीय-भार को डाउनलोड करें

निम्नलिखित आइफ्रेम के लिए उदाहरण है, एक बार जब यह लोड हो जाता है तो परीक्षणकॉलबैकफंक्शन को नियंत्रक में कहा जाएगा

उदाहरण

जे एस

    // include the `ngLoad` module
    var app = angular.module('myApp', ['ngLoad']);
    app.controller('myCtrl', function($scope) {
        $scope.testCallbackFunction = function() {
          //TODO : Things to do once Element is loaded
        };

    });  

एचटीएमएल

  <div ng-app='myApp' ng-controller='myCtrl'> 
      <iframe src="test.html" ng-load callback="testCallbackFunction()">  
  </div>

Comments

कृपया कुछ उदाहरण कोड को यह दिखाने के लिए कि कैसे ओपी समस्या को हल कर सकता है

— jro

@ जिरो अपडेटेड मेरे ans। आशा है कि यह उपयोगी होगा :)

— दर्शन जैन

Answer 8

यदि आपको प्रगति में पहले से ही $ डाइजेस्ट मिल रहा है, तो इससे मदद मिल सकती है:

return {
        restrict: 'A',
        link: function( $scope, elem, attrs ) {
            elem.ready(function(){

                if(!$scope.$$phase) {
                    $scope.$apply(function(){
                        var func = $parse(attrs.elemReady);
                        func($scope);
                    })
                }
                else {

                    var func = $parse(attrs.elemReady);
                    func($scope);
                }

            })
        }
    }

Answer 9

पेज लोड होने के बाद रनिंग को विंडो लोड ईवेंट में इवेंट श्रोता को सेट करके आंशिक रूप से संतुष्ट होना चाहिए

window.addEventListener("load",function()...)

module.run(function()...)कोणीय के अंदर आपके पास मॉड्यूल संरचना और निर्भरता तक सभी पहुंच होगी।

संचार पुलों के लिए आप कर सकते हैं broadcastऔर emitघटनाओं।

उदाहरण के लिए:

• मॉड्यूल सेट onload घटना और तर्क का निर्माण
• नियंत्रक के लिए मॉड्यूल प्रसारण घटना जब तर्क की आवश्यकता होती है
• नियंत्रक मॉड्यूल ऑनलोड प्रक्रियाओं के आधार पर अपने स्वयं के तर्क को सुनेंगे और निष्पादित करेंगे।

Answer 10

मैं {{myFunction()}}टेम्पलेट में उपयोग कर रहा था , लेकिन फिर नियंत्रक के अंदर का उपयोग करके एक और तरीका पाया $timeout। सोचा था कि मैं इसे साझा करूंगा, मेरे लिए बहुत अच्छा काम करेगा।

angular.module('myApp').controller('myCtrl', ['$timeout',
function($timeout) {
var self = this;

self.controllerFunction = function () { alert('controller function');}

$timeout(function () {
    var vanillaFunction = function () { alert('vanilla function'); }();
    self.controllerFunction();
});

}]);

Comments

मैंने यहां सभी उत्तरों की कोशिश की और किसी कारण से, $ टाइमआउट केवल एक चीज है जिसने मेरे लिए काम किया। यकीन नहीं क्यों, लेकिन यह एनजी-शामिल और आरंभ करने वाली सेवाओं के समय के साथ कुछ कर सकता है।

— ड्रेलेगॉर

मैंने {{myFunction ()}} के लिए एक प्लस जोड़ा

— '12

Answer 11

यदि आप कुछ तत्व को पूरी तरह से लोड करना चाहते हैं, तो उस तत्व पर एनजी-इनिट का उपयोग करें।

जैसे <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>

initModalFacademyInfo () फ़ंक्शन नियंत्रक में मौजूद होना चाहिए।

Answer 12

मैंने पाया कि यदि आपके पास नेस्टेड विचार हैं - $ नेकांटेंटेलबेडेड नेस्टेड व्यू में से प्रत्येक के लिए ट्रिगर हो जाता है। मैंने अंतिम $ दृश्य देखने के लिए यह वर्कअराउंड बनाया है लगता है कि $ $ window.prerenderReady स्थापित करने के लिए ठीक काम करने के लिए Prerender (मुख्य app.js में .run () में चला जाता है):

// Trigger $window.prerenderReady once page is stable
// Note that since we have nested views - $viewContentLoaded is fired multiple
// times and we need to go around this problem
var viewContentLoads = 0;
var checkReady = function(previousContentLoads) {
  var currentContentLoads = Number(viewContentLoads) + 0; // Create a local copy of the number of loads
  if (previousContentLoads === currentContentLoads) { // Check if we are in a steady state
    $window.prerenderReady = true; // Raise the flag saying we are ready
  } else {
    if ($window.prerenderReady || currentContentLoads > 20) return; // Runaway check
    $timeout(function() {checkReady(currentContentLoads);}, 100); // Wait 100ms and recheck
  }
};
$rootScope.$on('$stateChangeSuccess', function() {
  checkReady(-1); // Changed the state - ready to listen for end of render
});
$rootScope.$on('$viewContentLoaded', function() {
  viewContentLoads ++;
});

Answer 13

var myTestApp = angular.module("myTestApp", []); 
myTestApp.controller("myTestController", function($scope, $window) {
$window.onload = function() {
 alert("is called on page load.");
};
});

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, क्यों और / या इस कोड के उत्तर के बारे में अतिरिक्त संदर्भ प्रदान करने से प्रश्न इसके दीर्घकालिक मूल्य में सुधार करता है।

— रोलस्टुफ़्लोरहेयर

Answer 14

मेरे लिए काम करने वाला समाधान निम्नलिखित है

app.directive('onFinishRender', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                    if (!!attr.onFinishRender) {
                        $parse(attr.onFinishRender)(scope);
                    }
                });
            }

            if (!!attr.onStartRender) {
                if (scope.$first === true) {
                    $timeout(function () {
                        scope.$emit('ngRepeatStarted');
                        if (!!attr.onStartRender) {
                            $parse(attr.onStartRender)(scope);
                        }
                    });
                }
            }
        }
    }
}]);

नियंत्रक कोड निम्नलिखित है

$scope.crearTooltip = function () {
     $('[data-toggle="popover"]').popover();
}

Html कोड निम्नलिखित है

<tr ng-repeat="item in $data" on-finish-render="crearTooltip()">

Answer 15

मैं setIntervalभरी हुई सामग्री की प्रतीक्षा करने के लिए उपयोग करता हूं । मुझे उम्मीद है कि इससे आपको उस समस्या को हल करने में मदद मिल सकती है।

var $audio = $('#audio');
var src = $audio.attr('src');
var a;
a = window.setInterval(function(){
    src = $audio.attr('src');
    if(src != undefined){
        window.clearInterval(a);
        $('audio').mediaelementplayer({
            audioWidth: '100%'
        });
    }
}, 0);

Comments

क्या लोग अभी भी 2016setInterval में समाधान के रूप में सुझा रहे हैं ?

— ज़ाचरी दहन

लेकिन agular में कोई सरल एपीआई नहीं है ... कैसे .. इसे कैसे करें?

— पियोट कुला