2012-12-12 32 views
28

क्या जावास्क्रिप्ट फ़ंक्शन से कोणीय फ़ंक्शन को कॉल करने का कोई तरीका है?दस्तावेज़ तैयार पर कॉल कोणीय फ़ंक्शन

function AngularCtrl($scope) { 
    $scope.setUserName = function(student){ 
    $scope.user_name = 'John'; 
    } 
} 

मैं अपने html में निम्नलिखित कार्यक्षमता की जरूरत है:

jQuery(document).ready(function(){ 
    AngularCtrl.setUserName(); 
} 

समस्या यहाँ जब पेज लोड और इसलिए html में एनजी निर्देशों संकलित नहीं कर रहे हैं मेरी एचटीएमएल कोड मौजूद है। इसलिए मैं $ संकलन करना चाहता हूं (jQuery ("पॉपअप आईडी)); जब डोम लोड हो जाता है।

क्या दस्तावेज़ तैयार करने पर कोणीय फ़ंक्शन को कॉल करने का कोई तरीका है? क्या कोई मुझे इस बारे में सहायता कर सकता है?

+0

मुझे आपके setUserName फ़ंक्शन को समझ में नहीं आता - यह छात्र तर्क लेता है, लेकिन हार्डकोड 'जॉन'? क्या आप बस एक नियंत्रक के अंदर की जरूरत है, एक विधि में नहीं? उदा।, MyCtrl ($ स्कोप) {$ scope.user_name = 'जॉन' फ़ंक्शन; ...}। या वह बहुत देर हो चुकी है? शायद $ viewContentLoaded मदद करेगा यदि आप एनजी-व्यू का उपयोग कर रहे हैं: http://stackoverflow.com/questions/11454383/angularjs- लक्ष्यीकरण-elements-inside-an-ng-repeat-loop-on-document-ready –

उत्तर

45

कोणीय के पास दस्तावेज़ तैयार करने के लिए अपना स्वयं का कार्य है। आप एक मैनुअल बूटस्ट्रैप कर सकता है और उसके बाद उपयोगकर्ता नाम सेट: आप एचटीएमएल से एनजी-ऐप निर्देश हटाने की जरूरत काम करने के लिए

angular.element(document).ready(function() { 
    var $injector = angular.bootstrap(document, ['myApp']); 
    var $controller = $injector.get('$controller'); 
    var AngularCtrl = $controller('AngularCtrl'); 
    AngularCtrl.setUserName(); 
}); 

इसके लिए।

+18

आप बस 'angular.element (दस्तावेज़) 'के बजाय' $ दस्तावेज़' का उपयोग करें। [डॉक्स] (http://code.angularjs.org/1.1.5/docs/api/ng.$document) देखें। ध्यान दें कि आपको इसे पहले इंजेक्ट करने की आवश्यकता है। –

2

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

angular.module('myModule').directive('someDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     something: '=' 
    }, 
    templateUrl: 'stuff.html', 
    controller: function($scope, MyService, OtherStuff) { 
     // stuff to be done before the DOM loads as in data computation, model initialisation... 
    }, 
    link: function (scope, element, attributes) 
     // stuff that needs to be done when the DOM loads 
     // the parameter element of the link function is the directive's jqlite wraped element 
     // you can do stuff like element.addClass('myClass'); 
     // WARNING: link function arguments are not dependency injections, they are just arguments and thus need to be given in a specific order: first scope, then element etc. 
    } 
    }; 
}); 

सब ईमानदारी में, $ दस्तावेज़ या angular.element के मान्य उपयोग अत्यंत दुर्लभ (सिर्फ एक नियंत्रक के बजाय एक निर्देश उपयोग करने में असमर्थ) और ज्यादातर मामलों आप अपने डिजाइन की समीक्षा करने की बेहतर हो रही है।

पीएस: मुझे पता है कि यह प्रश्न पुराना है लेकिन अभी भी कुछ सर्वोत्तम प्रथाओं को इंगित करना है। :)