पृष्ठ लोड पर AngularJS नियंत्रक फ़ंक्शन को कैसे निष्पादित करें?

Question

वर्तमान में मेरे पास एक Angular.js पृष्ठ है जो खोज और परिणाम प्रदर्शित करने की अनुमति देता है। उपयोगकर्ता एक खोज परिणाम पर क्लिक करता है, फिर वापस बटन पर क्लिक करता है। मैं चाहता हूं कि खोज परिणाम फिर से प्रदर्शित हों, लेकिन मैं यह पता नहीं लगा सकता कि खोज को निष्पादित करने के लिए कैसे ट्रिगर किया जाए। यहाँ विस्तार है:

• मेरा Angular.js पृष्ठ एक खोज पृष्ठ है, जिसमें खोज फ़ील्ड और खोज बटन है। उपयोगकर्ता मैन्युअल रूप से एक क्वेरी में टाइप कर सकता है और एक बटन दबा सकता है और अजाक्स क्वेरी को निकाल दिया जाता है और परिणाम प्रदर्शित होते हैं। मैं खोज शब्द के साथ URL को अपडेट करता हूं। यह सब ठीक काम करता है।
• उपयोगकर्ता खोज के परिणाम पर क्लिक करता है और उसे एक अलग पृष्ठ पर ले जाया जाता है - जो ठीक भी काम करता है।
• उपयोगकर्ता बैक बटन पर क्लिक करता है, और मेरे कोणीय खोज पृष्ठ पर वापस जाता है, और खोज शब्द सहित सही URL प्रदर्शित होता है। सभी ठीक काम करता है।
• मैंने URL में खोज शब्द के लिए खोज फ़ील्ड मान को बाध्य किया है, इसलिए इसमें अपेक्षित खोज शब्द है। सभी ठीक काम करता है।

मुझे उपयोगकर्ता को "खोज बटन" दबाए बिना फिर से निष्पादित करने के लिए खोज फ़ंक्शन कैसे मिलता है? अगर यह jquery था, तो मैं डॉक्यूमेंट्री फ़ंक्शन में एक फ़ंक्शन निष्पादित करूंगा। मैं Angular.js के बराबर नहीं देख सकता।

Comments

क्या आप उपयोग कर रहे हैं $routepProvider? अपने ऐप में सेवा से कनेक्ट करने के लिए इसका उपयोग करें जो खोज परिणामों के लिए डेटा प्रदान करता है। document.readyJQuery के संदर्भ में मत सोचो । यह जानने के लिए कि आपने वर्तमान में तार-तार कैसे किया है, बिना बहुत मदद करने के लिए कठिन है

— charlietfl

Answer 1

एक ओर @ मार्क-राजकोक ने कहा कि आप निजी आंतरिक समारोह से दूर हो सकते हैं:

// at the bottom of your controller
var init = function () {
   // check if there is query in url
   // and fire search in case its value is not empty
};
// and fire it after definition
init();

इसके अलावा आप एनजी-इनिट निर्देश पर एक नज़र डाल सकते हैं । कार्यान्वयन इस तरह होगा:

// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

लेकिन इसके बारे में ध्यान रखें कि कोणीय प्रलेखन का अर्थ है (v1.2 के बाद से) इसके लिए उपयोग नहीं करना ng-init। हालाँकि, यह आपके ऐप के आर्किटेक्चर पर निर्भर करता है।

ng-initजब मैं बैक-एंड से कोणीय एप्लिकेशन में एक मान पास करना चाहता था, तो मैंने उसका उपयोग किया :

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>

Comments

@ ड्यूक, क्या आप अपने कंट्रोलर के नीचे init () फंक्शन की सामग्री नहीं डाल सकते हैं? यानी, आपको एनजी-इनिट का उपयोग करने की आवश्यकता क्यों है और एक इनिट () फ़ंक्शन है? जब उपयोगकर्ता बैक बटन दबाता है, तो मुझे लगता है कि आप दृश्य स्विच कर रहे हैं, इसलिए एक नया myCtrlनियंत्रक बनाया जाता है और निष्पादित होता है।

— मार्क राजकोक

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

— जेसन कैप्रियोटी

Html अपनी जगह पर होने के बाद नियंत्रक को तत्काल भेज दिया जाता है।

— दिमित्री एवसेव

क्या होगा यदि अन्य पृष्ठों में नियंत्रक का पुन: उपयोग किया जाता है, लेकिन आप इसे किसी विशिष्ट पृष्ठ पर रखना चाहते हैं?

— रॉबर्टो लिनारेस

@RobertoLinares मैं व्यक्तिगत रूप से पुन: प्रयोज्य कार्यक्षमता के लिए एक बेहतर जगह होने के निर्देश पाता हूं। आपके पास init पैरामीटर के साथ एक निर्देश हो सकता है <div smth on-init="doWhatever()">:। बेशक यह एक निश्चित उपयोग के मामले पर निर्भर करता है।

— दिमित्री इवसेव

Answer 2

इसे इस्तेमाल करे?

$scope.$on('$viewContentLoaded', function() {
    //call it here
});

Comments

इस उत्तर के लिए धन्यवाद, लेकिन दिमित्री का जवाब एक सटीक मेल था कि मैं क्या देख रहा हूं। इसके अलावा अनुसंधान $ viewContentLoaded के खिलाफ की सिफारिश करने के लिए लग रहा था

— ड्यूक डगल

उपयोग के मामले बस अलग हैं। मैं हर समय मार्क की विधि का उपयोग करता हूं।

— होलोग्राफिक-सिद्धांत

मेरे उपयोग के मामले के लिए यह एक सही समाधान था। हमें उपयोगकर्ता को इसे कॉपी करने के लिए प्रोत्साहित करने के लिए पाठ को स्वत: चित्रित करने की आवश्यकता थी। पृष्ठ को कई बार पुनः लोड / संशोधित किया जा सकता है, इसलिए $ viewContentLoaded एक सटीक मिलान था। धन्यवाद!

— ओल्गा ग्नतेंको

क्या यह संभव है कि यह कई बार निष्पादित हो? मुझे एक ऐसा व्यवहार मिल रहा है जो लगता है कि नकल कर रहा है ...

— MadPhysicist

यह एक मेरे लिए काम नहीं किया लेकिन $ गुंजाइश है। $ घड़ी काम किया। मुख्य अंतर क्या है?

— बुरक टोकक

Answer 3

मुझे कभी भी $viewContentLoadedकाम करने के लिए नहीं मिला , और ng-initवास्तव में केवल ng-repeat(प्रलेखन के अनुसार) में उपयोग किया जाना चाहिए , और एक नियंत्रक में सीधे एक फ़ंक्शन को कॉल करना भी त्रुटियों का कारण बन सकता है यदि कोड एक तत्व पर निर्भर करता है जो अभी तक परिभाषित नहीं किया गया है ।

यह वही है जो मैं करता हूं और यह मेरे लिए काम करता है:

$scope.$on('$routeChangeSuccess', function () {
  // do something
});

जब तक आप उपयोग नहीं कर रहे हैं ui-router। फिर यह है:

$scope.$on('$stateChangeSuccess', function () {
  // do something
});

Comments

तुम कमाल हो, मेरे दोस्त।

— taco

बिल्कुल वही जो मुझे चाहिए था। मैं दो दिनों के लिए सचमुच देख रहा था!

— हेल्लोजेबस

$scope.$on('$routeChangeSuccess'url में हर बार पैरामीटर बदल जाता है ( $locationउदाहरण के लिए), और इस प्रकार आप बस उपयोग कर सकते हैं $scope.$on('$locationChangeSuccess'। यदि आपको पृष्ठ लोड / पुनः लोड पर कुछ ट्रिगर की आवश्यकता है, तो आप $scope.$watch('$viewContentLoaded'यहां दिए गए सुझाव के अनुसार उपयोग कर सकते हैं। यह url पैरामीटर्स में बदलाव के दौरान फायर नहीं करेगा।

— न्यूरोट्रांसमीटर

AngularJS 1.17.2 का उपयोग करते हुए, नियंत्रक $ मार्ग में परिवर्तन करें। असफलता ने आश्चर्यजनक रूप से काम किया ... लंबे समय तक जीना adam0101 ...

— ArifMustafa

Answer 4

angular.element(document).ready(function () {

    // your code here

});

Comments

स्वीकृत उत्तर होना चाहिए, यह इसे करने के लिए सुरक्षित तरीका है

— मारवेन ट्रैबेल्सी

यह अच्छा है अगर हम साथ काम नहीं करते हैं $scopeऔर इसके साथ काम करते हैं this।

— आकाश

इसे जाने की आवश्यकता कहां है? मेरे पास यह मेरे टेम्पलेट में है और यह फायरिंग नहीं है।

— डेव

इस मामले में $ दस्तावेज़ को इंजेक्ट करना सबसे अच्छा नहीं होगा? angular.element ($ डॉक्यूमेंट)। पहले से ही ...

— जेमी

स्पष्टीकरण की सराहना की जाएगी

— हित रहमान

Answer 5

दिमित्री के मार्क / समाधान ने मेरे लिए काम नहीं किया, लेकिन $ टाइमआउट फ़ंक्शन का उपयोग करने से यह सुनिश्चित होता है कि आपके कोड को केवल मार्कअप के बाद ही चलाया जाए।

# Your controller, including $timeout

var $scope.init = function(){
 //your code
}

$timeout($scope.init)

आशा है ये मदद करेगा।

Comments

आखिरकार। यह एकमात्र ऐसा है जिसने मेरे लिए काम किया। धन्यवाद।

— zmirc 10

यह काम। $ Timeout.cancel (टाइमर) के साथ समय समाप्त करने के लिए भी मत भूलना जहाँ आपके पास var टाइमर = $ timeout ($ गुंजाइश.init, मिलीसेकंड) है; एक बार जब आपका आरंभीकरण हो जाता है। इसके अलावा, मुझे नहीं लगता कि $ गुंजाइश के ऊपर आपके कोड में 'var' की कमी होनी चाहिए

— Emmanuel NK

यह स्वीकृत उत्तर होना चाहिए। यह एकमात्र ऐसा था जिसने मेरे लिए काम किया (ऊपर सभी उत्तरों की कोशिश की)। यह भी काम करता है अगर आप लोड करने के लिए एक iframe की प्रतीक्षा कर रहे हैं।

— hello_fr1end

यह काम ! viewcontentLoaded ने मेरे लिए काम नहीं किया

— डार्क नाइट

Answer 6

आप यह कर सकते हैं यदि आप viewContentLoaded DOM ऑब्जेक्ट को बदलने और फिर कुछ करने के लिए देखना चाहते हैं। $ स्कोप का उपयोग करना। $ कामों पर भी। लेकिन अलग-अलग, खासकर जब आपके पास अपने रूटिंग पर एक पेज मोड हो।

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });

Comments

विशेष रूप से, यदि आप $ rootScope का उपयोग करते हैं। $ $ rootScope के बजाय $ घड़ी। इस पर $ मार्ग में परिवर्तन नहीं होगा, इसलिए आप प्रारंभिक पृष्ठ लोड के लिए विशिष्ट तर्क का उपयोग कर सकते हैं।

— csahlman

Answer 7

आप कोणीय की $ खिड़की वस्तु का उपयोग कर सकते हैं:

$window.onload = function(e) {
  //your magic here
}

Answer 8

एक अन्य विकल्प:

var myInit = function () {
    //...
};
angular.element(document).ready(myInit);

( https://stackoverflow.com/a/30258904/148412 के माध्यम से )

Answer 9

फिर भी एक अन्य विकल्प यदि आपके पास उस पृष्ठ के लिए विशिष्ट नियंत्रक है:

(function(){
    //code to run
}());

Answer 10

$ मार्गप्रोपाइडर का उपयोग करते समय आप अपनी सेवा को .state और बूटस्ट्रैप पर हल कर सकते हैं। यह कहना है, आप अपनी सेवा को हल करने के बाद ही नियंत्रक और दृश्य लोड करने जा रहे हैं:

ui-मार्गों

 .state('nn', {
        url: "/nn",
        templateUrl: "views/home/n.html",
        controller: 'nnCtrl',
        resolve: {
          initialised: function (ourBootstrapService, $q) {

            var deferred = $q.defer();

            ourBootstrapService.init().then(function(initialised) {
              deferred.resolve(initialised);
            });
            return deferred.promise;
          }
        }
      })

सर्विस

function ourBootstrapService() {

 function init(){ 
    // this is what we need
 }
}

Answer 11

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

केस 1: अकेले एंगुलरज का उपयोग करना:
पेज लोड पर एक विधि निष्पादित करने के लिए, आप ng-initकंट्रोलर में व्यू और डिक्लेयर मेथड का उपयोग कर सकते हैं , यह कहते हुए कि भारी कार्य का उपयोग अनुशंसित नहीं है, एनजी-इनिट पर कोणीय डॉक्स के अनुसार :

आपके निर्देशों में अनावश्यक मात्रा में तर्क जोड़ने के लिए इस निर्देश का दुरुपयोग किया जा सकता है। NgInit के केवल कुछ उपयुक्त उपयोग हैं, जैसे कि ngRepeat के विशेष गुणों को अलग करने के लिए, जैसा कि नीचे डेमो में देखा गया है; और सर्वर साइड स्क्रिप्टिंग के माध्यम से डेटा इंजेक्ट करने के लिए। इन कुछ मामलों के अलावा, आपको एक दायरे पर मूल्यों को शुरू करने के लिए ngInit के बजाय नियंत्रकों का उपयोग करना चाहिए।

HTML:

<div ng-controller="searchController()">
    <!-- renaming view code here, including the search box and the buttons -->
</div>

नियंत्रक:

app.controller('SearchCtrl', function(){

    var doSearch = function(keyword){
        //Search code here
    }

    doSearch($routeParams.searchKeyword);
})

चेतावनी: इस नियंत्रक का उपयोग किसी अन्य उद्देश्य के लिए किसी अन्य दृश्य के लिए न करें क्योंकि यह खोज विधि को वहां भी निष्पादित करेगा।

केस 2: आयोनिक का उपयोग करना:
उपरोक्त कोड काम करेगा, बस सुनिश्चित करें कि दृश्य कैश को इस route.jsरूप में अक्षम किया गया है:

route.js

.state('app', {
    url           : '/search',
    cache         : false, //disable caching of the view here
    templateUrl   : 'templates/search.html'   ,
    controller    : 'SearchCtrl'
  })

उम्मीद है की यह मदद करेगा

Comments

यह केवल एक ही था और बहुत नीचे था, खुशी है कि मैं सभी तरह से नीचे चला गया, cache: falseमेरे लिए यह किया - धन्यवाद!

— रानी खीर

Answer 12

मेरे पास एक ही समस्या थी और केवल इस समाधान ने मेरे लिए काम किया (यह एक पूर्ण डोम लोड होने के बाद एक फ़ंक्शन चलाता है)। पेज लोड होने के बाद मैं इसे स्क्रॉल करने के लिए एंकर के लिए उपयोग करता हूं:

angular.element(window.document.body).ready(function () {

                        // Your function that runs after all DOM is loaded

                    });

Answer 13

आप खोज परिणामों को एक सामान्य सेवा में सहेज सकते हैं जो कहीं से भी उपयोग कर सकते हैं और दूसरे पृष्ठ पर नेविगेट करने पर स्पष्ट नहीं होते हैं, और फिर आप बैक बटन के क्लिक के लिए सहेजे गए डेटा के साथ खोज परिणाम सेट कर सकते हैं

function search(searchTerm) {
    // retrieve the data here;
    RetrievedData = CallService();
    CommonFunctionalityService.saveSerachResults(RetrievedData);
} 

अपने बैकबटन के लिए

function Backbutton() {
    RetrievedData = CommonFunctionalityService.retrieveResults();
}

Answer 14

सेल्फ इनिशियलाइज़ फंक्शन के अंदर शुरुआती तरीकों को कॉल करें।

(function initController() {

    // do your initialize here

})();