বিষয়বস্তু লোড হওয়ার পরে কল করার জন্য কৌণিকজে ইভেন্টগুলি

Question

আমার একটি ফাংশন রয়েছে যা পৃষ্ঠার সামগ্রী লোড হওয়ার পরে কল করতে চাই। আমি $ ভিউকন্টেন্টলয়েড সম্পর্কে পড়েছি এবং এটি আমার পক্ষে কার্যকর হয় না। আমি এরকম কিছু খুঁজছি

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

উপরের কলটি AngularJs নিয়ামকটিতে আমার পক্ষে কাজ করে না।

Comments

এই ভাল কাজ করে stackoverflow.com/q/14968690/6521116

— ক্রিস Roofe

Answer 1

$ ভিউকন্টেন্টলয়েডের ডকুমেন্টেশন অনুসারে এটি কাজ করার কথা

এনজিভিউ সামগ্রীটি পুনরায় লোড করার সময় প্রতিবার নির্গত হয়।

$viewContentLoaded ইভেন্টটি নির্গত হয় এর অর্থ এই ইভেন্টটি গ্রহণ করার জন্য আপনার মতো পিতামাতার নিয়ামক প্রয়োজন

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

আপনার কাছ থেকে MainCtrlইভেন্টটি শুনতে পারেন

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

ডেমো পরীক্ষা করুন

Comments

এই পদ্ধতির সাথে সমস্যা হ'ল নিয়ন্ত্রকরা এই মুহুর্তে পুরোপুরি আরম্ভ করেননি।

— অ্যাশ ব্লু

@ রেজা তিনি ঠিক বলেছেন, ডোম যুক্ত হওয়ার পরে এই ইভেন্টটি বরখাস্ত করা হবে তবে কৌণিকটি ডোমটি প্রক্রিয়াজাতকরণ শেষ করার আগেই। আপনি কৌণিক ভেরিয়েবল হিসাবে কোনও আইডি বা ক্লাস যুক্ত করে এটি পরীক্ষা করতে পারেন এবং jQuery এর সাথে ভিউকন্টেন্টলয়েডে এটি সন্ধান করার চেষ্টা করতে পারেন। আপনি এটি পাবেন না।

— টমাস কেকেইসেন

@ রেজা হ্যাঁ, থমাস ঠিক বলেছেন যে ফর্ম উপাদানটি $ ভিউকন্টেন্টলয়েড বলে $ স্কোপ.ফর্মনেম.ইলেমনেম। "TypeError নিক্ষেপ করবে: অপরিজ্ঞাতকৃতের নাম 'নামটি পড়তে পারে না"

— মুসাম্মিল

একইটিকে $ রুটস্কোপ স্তরে কল করা যেতে পারে। $ সুযোগ। Instead এর পরিবর্তে এটি অ্যাপ্লিকেশন ব্লকটির ভিতরে এবং অভ্যন্তরে "রুটস্কোপ" should হওয়া উচিত

— ভিল

এই বিকল্পটি কার্যকর হবে না যখন আপনার ng-repeatএবং বেশ কয়েকটি নেস্টেড নির্দেশিকা থাকে যা জটিল লুপগুলি এবং শর্তের ভিত্তিতে এইচটিএমএল / সামগ্রী তৈরি করে। $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 এর মধ্যে যায়?

— জেকুন

আপনি এটি আপনার কন্ট্রোলারগুলিতে শুনতে পারেন

— j js

মূল app.js ফাইলটিতেও ঠিক আছে।

— লুবট

উত্তরটি আমার পক্ষে কাজ করে! কেবলমাত্র ডকুমেন্টেশন উপাদান পৃষ্ঠায় 'রেডি () (অবচিত, কৌণিক.ইলেমেন্ট (ডকুমেন্ট) এর পরিবর্তে কৌণিক.এলিমেন্ট (কলব্যাক) ব্যবহার করুন। প্রস্তুত (কলব্যাক))' দেখুন

— লাভরা

এটি আমার পক্ষে কাজ করেছে। গৃহীত উত্তর পদ্ধতির নিয়ন্ত্রণকারীর ভিতরে কাজ করে না।

— ফ্যাবিয়ানো

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>

এর সুবিধাটি হ'ল আপনি নিজের পছন্দ মতো বিস্তৃত বা দানাদার ডাব্লু / আপনার ইউআই হতে পারেন এবং আপনি আপনার কন্ট্রোলার থেকে DOM লজিক অপসারণ করছেন। আমি যুক্তি দিতে চাই এটি প্রস্তাবিত কৌণিক উপায়।

আপনার যদি একই নোডে অন্যান্য নির্দেশাবলী কাজ করে থাকে তবে আপনাকে এই নির্দেশকে অগ্রাধিকার দেওয়ার প্রয়োজন হতে পারে।

Comments

এটি দেখতে সত্যিই একটি ভাল সমাধান বলে মনে হচ্ছে, তবে আমি এটি কার্যকর করতে পারি না। এটি elem.ready( $scope.$apply( readyFunc( $scope ))); কেন এমন কোনও ধারণাগুলিতে চেপে গেছে ? কৌণিকের সাথে সম্ভবত একটি আপডেট হয়েছে? যাইহোক - এটি একটি মার্জিত পদ্ধতির, যদি এটি কাজ করতে পারে।

— ডোমারিগাতো

এনএম, আমি দেখছি সমস্যাটি কী ছিল। এর উপরে একটি টাইপ ছিল attrs.onReady, এটি এখন যা হওয়া উচিত। অন্য সমস্যাটি হ'ল আমি এটিকে মজাদার বলছিলাম .... ... মেমরি থেকে জেএসে রূপান্তরিত করার জন্য আমি কী পাই।

— Justopi

আমি মনে করি কিছু ক্ষেত্রে সঠিক হতে পারে তবে এর বিপরীতে আমার যুক্তিগুলি হ'ল: আমি মনে করি যে তার কোডের প্রত্যাশাগুলি যখন কেবল দৃষ্টিতে তাকিয়ে থাকে তখন এটি ডিওএম-তে প্রদর্শিত কিছু পাঠ্য মান ফিরিয়ে দেবে, তবে এটিকে সতর্ক দৃষ্টি রাখতে হবে; নির্দেশিক অগ্রাধিকারের ক্ষেত্রে এটি কোনও সময়কে অনুমতি দেয় না, আপনি যদি না ব্যবহার করেন তবে আপনি নিয়ন্ত্রণকারী স্তরে আটকে থাকেন $timeout; আপনি স্পষ্টভাবে একটি অ্যাডেট তৈরি করছেন। ডোম নোডটি কেবল নন-ডোম যুক্তি প্রয়োগ করতে; এটি কেবলমাত্র পুনরায় ব্যবহারযোগ্য যদি এই পদ্ধতিটি শিশু স্কোপগুলির উত্তরাধিকার সূত্রে এই জাতীয় স্কোপ হায়ারার্কিতে খুব বেশি অবস্থান করে; তবে আমি মনে করি এটি কোনও এনজি দৃষ্টিকোণে খারাপ দেখাচ্ছে;

— Justopi

$timeout(function() {})আশেপাশে একটি যোগ করার পরে আমার জন্য কাজ করেছেন elem.ready()। অন্যথায় এটি একটি $digest already in progressত্রুটি ছুড়েছিল। তবে যাইহোক, ধন্যবাদ একটি টন! আমি গত এক ঘন্টা ধরে এটির সাথে লড়াই করে যাচ্ছি।

— rkrishnan

$ স্কোপ দিয়ে খনন করা খালি মনে হচ্ছে। কোন ধারনা?

— মিলো দ্য গ্রেট

Answer 4

আপনি সরাসরি {{YourFunction()}}এইচটিএমএল উপাদান যুক্ত করে এটি কল করতে পারেন ।

এখানে একটি Plunker Link।

Comments

আপনি যে উত্তরটি সরবরাহ করেন সে সম্পর্কে আরও কিছু বিবরণ যুক্ত করে আরও উত্তর দিতে পারেন?

— অ্যারিসোন

আমি মনে করি যে এইচটিএমএল উপাদানটি লোড হয়ে গেলে আপনি কোনও ফাংশন কল করতে চান। সুতরাং উপরে উল্লিখিত হিসাবে যে ফাংশন কল। যদি আমার অনুমান আপনার সন্দেহ সম্পর্কে সঠিক হয় তবে এটি অন্যথায় কাজ করবে আপনার অনুগ্রহটি বিস্তারিতভাবে বর্ণনা করুন। :)

— নীল

এই মত একটি ফাংশন কল করার সময়। এটি একবারে আহ্বান করা হয়েছে তা নিশ্চিত করুন নাহলে ডাইজেস্ট চক্রটি অসীম চলবে এবং একটি ত্রুটি দেখায়

— আশান

আমি এই সমাধানটি পছন্দ করি, এটি

— সত্যই

এটি দুর্দান্ত - কেবল একটি সমস্যা। দেখা যাচ্ছে যে আমি যখন এটি ব্যবহার করি তখন আমার ফাংশনটি 5 বার চলে। আমি একটি কাউন্টার যুক্ত করেছি সুতরাং এটি ঠিকঠাক কাজ করছে তবে আমি ভাবছি কেন এমনটি ঘটবে তা যদি কেউ জানে কিনা ... আপনি কি খানিকটা অদ্ভুত মনে হয়?

— itchyspacesuit

Answer 5

গুগল চার্ট সহ পরিচালনা করার সময় আমাকে এই যুক্তিটি বাস্তবায়ন করতে হয়েছিল। আমি যা করেছি তা হ'ল আমার 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

আমি এটি ব্যবহার করছিলাম তবে পৃষ্ঠার শীর্ষে, ডিআইএস-কে পৃষ্ঠার নীচে এনজি-আরআম সরানোর মাধ্যমে আমার ডিভাইসটি, সুন্দর টিপ ঠিক করা হয়েছে এবং কিছুটা ডিভ ইতিমধ্যে লোড করা দরকার।

— গার্নার্ড

কেবল উত্তরটি যা আমাকে আমার সমস্যায় সহায়তা করেছে (jquery মোবাইল খালি নির্বাচন)

— কায়সার

এটি আসল উত্তর হ'ল এটি গতিশীলভাবে লোড হওয়া নিয়ন্ত্রণগুলিতে অভিযোজিত এবং প্রয়োগ করা অত্যন্ত সহজ।

— জেসন সেব্রিং

এই উত্তরটি আমাকে কিছু সময় সাশ্রয় করেছে, তাই আমার ব্যবহারের ক্ষেত্রে এটি মার্জিত এবং কার্যকর

— সেলো

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

আপনি কৌণিক জেএসে অনলোডের ইভেন্টের জাভাস্ক্রিপ্ট সংস্করণটি কল করতে পারেন। এই এনজি-লোড ইভেন্টটি যে কোনও ডোম উপাদান যেমন ডিভ, স্প্যান, বডি, আইফ্রেমে, আইএমজি ইত্যাদিতে প্রয়োগ করা যেতে পারে আপনার বিদ্যমান প্রকল্পে এনজি-লোড যুক্ত করার লিঙ্কটি নীচে।

কৌণিক জেএস জন্য এনজি লোড ডাউনলোড করুন

নিম্নলিখিতটি iframe এর উদাহরণস্বরূপ, একবার এটি লোড হয়ে গেলে টেস্টক্যালব্যাক ফাংশনটি কন্ট্রোলারে ডাকা হবে

EXAMPLE টি

জাতীয়

    // 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

@ জরো আমার উত্তরগুলি আপডেট করেছে। আশা করি এটি সহায়ক হবে :)

— দর্শনা জৈন

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ইভেন্টগুলি করতে পারেন ।

উদাহরণ স্বরূপ:

• মডিউল সেট আপলোড ইভেন্ট এবং যুক্তি তৈরি
• মডিউল ব্রডকাস্ট ইভেন্টটি যখন কন্ট্রোলারদের কাছে এটির প্রয়োজন হয়
• কন্ট্রোলারগুলি মডিউল অনলোড প্রক্রিয়াগুলির উপর ভিত্তি করে তাদের নিজস্ব যুক্তি শুনবে এবং সম্পাদন করবে।

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

আমি এখানে এবং কিছু কারণে সমস্ত উত্তর চেষ্টা করেছিলাম, $ টাইমআউটটি আমার পক্ষে কাজ করেছিল। নিশ্চিত না কেন, তবে এটি এনজি-অন্তর্ভুক্ত এবং পরিষেবাগুলি শুরু করার সময়টির সাথে কিছু করতে পারে।

— ড্রেলগার

আমি

— F

Answer 11

আপনি যদি কিছু উপাদান পুরোপুরি লোড করতে চান তবে সেই এলিমেন্টে এনজি-থিম ব্যবহার করুন।

যেমন <div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"> ..</div>

initModalFactoryInfo () ফাংশনটি নিয়ামকের মধ্যে থাকা উচিত।

Answer 12

আমি দেখতে পেয়েছি যদি আপনার নেস্ট করা মতামত থাকে - - ভিউকন্টেন্টলয়েড প্রতিটি নেস্টেড ভিউয়ের জন্য ট্রিগার হয়ে যায়। চূড়ান্ত - ভিউকন্টেন্টলয়েডটি সন্ধান করার জন্য আমি এই কাজটি তৈরি করেছি। Re উইন্ডো.প্রিয়েন্ডার সেট করার জন্য ঠিকঠাক কাজ করার জন্য মনে হচ্ছে প্রিেন্ডর প্রয়োজন অনুসারে (মূল অ্যাপ্লিকেশন .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();
}

এইচটিএমএল কোডটি নিম্নলিখিত is

<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 সালে সমাধান হিসাবে প্রস্তাব দিচ্ছে ?

— জাচারি দহন

কিন্তু অচল তেমন কোনও সহজ এপি নেই ... কীভাবে .. এটি কীভাবে করবেন?

— পাইওটর কুলা