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



events loaded (9)

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

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

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


Answer #1

तय - 2015.06.0 9

एक निर्देश और कोणीय तत्व 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>

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

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


Answer #2

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

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

और उस समारोह में बस अपने तर्क को बुलाओ।

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

Answer #3

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

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

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

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

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

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

Answer #4

मैं टेम्पलेट में {{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();
});

}]);

Answer #5

मैंने पाया कि यदि आपके पास घोंसला वाले विचार हैं - $ viewContentLoaded प्रत्येक नेस्टेड दृश्यों के लिए ट्रिगर हो जाता है। मैंने अंतिम $ viewContentLoaded खोजने के लिए यह वर्कअराउंड बनाया है। प्रेजेंडर द्वारा आवश्यक $ window.prerenderReady को सेट करने के लिए ठीक लगता है (मुख्य 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 #6

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

उदाहरण के लिए <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>

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


Answer #7

$viewContentLoaded दस्तावेज़ीकरण के अनुसार, यह काम करना चाहिए

हर बार emgView सामग्री को पुनः लोड किया जाता है।

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

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

MainCtrl आप ईवेंट सुन सकते हैं

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

Demo जांच करें


Answer #8

कोणीय <1.6.एक्स

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

कोणीय> = 1.6.एक्स

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

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




loaded