क्या मैं कोणीय में प्रत्येक नियंत्रक में एक फ़ंक्शन उपलब्ध करा सकता हूं?

191

यदि मेरे पास एक उपयोगिता फ़ंक्शन है fooजिसे मैं अपनी ng-appघोषणा के अंदर कहीं से भी कॉल करने में सक्षम होना चाहता हूं । क्या कोई ऐसा है जो मैं इसे अपने मॉड्यूल सेटअप में विश्व स्तर पर सुलभ बना सकता हूं या क्या मुझे इसे प्रत्येक नियंत्रक में दायरे में जोड़ने की आवश्यकता है?

angularjs  function  global 
— लुडविग मैग्यूसन
स्रोत
मैं इस बारे में 100% निश्चित नहीं हूं, लेकिन एक मौका है कि आप इसे अपने मॉड्यूल पर भी इस तरह परिभाषित कर सकते हैं: module.value('myFunc', function(a){return a;});और फिर इसे अपने नियंत्रकों में नाम से इंजेक्ट करें। (यदि कोई सेवा करने से बचना चाहता है)
— user2173353
मतलब कि मुझे इसे हर कंट्रोलर से मैनुअली जोड़ना होगा। $ rootScope उस रास्ते पर जाने का रास्ता है जो मैं लगभग 2 साल पहले करना चाहता था =)
— लुडविग मैग्यूसन
ठीक है। :) मैं बस सादे नियंत्रकों की तुलना में अलग-अलग गुंजाइश वाले निर्देशों का उपयोग करता हूं और मुझे वैसे भी सब कुछ इंजेक्ट करना होगा। मुझे मॉड्यूलर कोड शैली पसंद है जो यह प्रदान करती है। इसके अलावा, आपको किसी भी तरह से पैरेंट स्कोप के साथ गड़बड़ करने की ज़रूरत नहीं है और आपके स्कोप वैरिएबल कहां से आते हैं, इसके लिए आपको ज्यादा खोज करने की जरूरत नहीं है। :)
— user2173353 12

जवाबों:

290

आपके पास मूल रूप से दो विकल्प हैं, या तो इसे एक सेवा के रूप में परिभाषित करें, या इसे अपने रूट स्कोप पर रखें। मेरा सुझाव है कि आप रूट स्कोप को प्रदूषित करने से बचाने के लिए इसमें से एक सेवा करें। आप एक सेवा बनाते हैं और इसे अपने नियंत्रक में इस तरह उपलब्ध कराते हैं:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.factory('myService', function() {
        return {
            foo: function() {
                alert("I'm foo!");
            }
        };
    });

    myApp.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
        $scope.callFoo = function() {
            myService.foo();
        }
    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="callFoo()">Call foo</button>
</body>
</html>

यदि यह आपके लिए कोई विकल्प नहीं है, तो आप इसे इस तरह जड़ दायरे में जोड़ सकते हैं:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.run(function($rootScope) {
        $rootScope.globalFoo = function() {
            alert("I'm global foo!");
        };
    });

    myApp.controller('MainCtrl', ['$scope', function($scope){

    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="globalFoo()">Call global foo</button>
</body>
</html>

इस तरह, आपके सभी globalFoo()टेम्प्लेट नियंत्रक से टेम्पलेट में इसे पास किए बिना कॉल कर सकते हैं ।

— एंडर्स एकदहल
स्रोत
5
पहले समाधान में, क्या होगा अगर टन के foo()कार्य हैं? $scope.callFoo()उनमें से हर एक के लिए एक आवरण बनाना बहुत अधिक काम है। मैं एक पुस्तकालय के सभी कार्यों को कैसे "संलग्न" कर सकता हूं ताकि इसका उपयोग टेम्पलेट में किया जा सके? मेरे पास एक बड़ी इकाई रूपांतरण लाइब्रेरी है जो मैं चाहता हूं कि यह मेरे टेम्पलेट पर उपलब्ध हो।
— एलेक्सस्टैक
3
मेरा सवाल भी। मैंने इसे आज़माया और यह काम करता है: आप $scope.callFoo = myService.foo;प्रत्येक स्थान पर एक नया आवरण बनाने के स्थान पर "संलग्न" कर सकते हैं जिसे आप इसका उपयोग करना चाहते हैं।
— फिटर मैन
1
आपकी मदद के लिए धन्यवाद, मैं सोच रहा था कि कैसे अपने ऐप और $ rootScope में काम करने के लिए एक परिवर्तन भाषा फ़ंक्शन उपलब्ध कराया जाए। मैं अनुवाद मॉड्यूल को एप्लिकेशन से अलग रखना चाहता था ताकि मैं इसे अन्य एप्लिकेशन में भी प्लग कर सकूं।
— पाउलो पेड्रोसो
मेरा सुझाव है कि इस विशिष्ट मामले के लिए एक कारखाने के बजाय एक कोणीय मूल्य का उपयोग करें जब तक कि आप एक सेवा के भीतर कई कार्य करने की योजना नहीं बनाते हैं। यदि यह केवल एक ही फ़ंक्शन है, तो इसे एक मूल्य बनाएं।
— निकोलस ब्लासगेन
मुझे त्रुटि मिली: [$ इंजेक्टर: अनप्र]
— मार्क थिएन
53

आप उन्हें भी जोड़ सकते हैं मुझे लगता है:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);

        myApp.factory('myService', function() {
            return {
                foo: function() {
                    alert("I'm foo!");
                }
            };
        });

        myApp.run(function($rootScope, myService) {
            $rootScope.appData = myService;
        });

        myApp.controller('MainCtrl', ['$scope', function($scope){

        }]);

    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="appData.foo()">Call foo</button>
</body>
</html>
— रिक
स्रोत
7
मुझे लगता है कि यह @Praym के उत्तर द्वारा सही उत्तर होना चाहिए। यह समझ में नहीं आता है कि 10 विभिन्न नियंत्रकों में एक सेवा निर्भरता निर्दिष्ट करें।
— jvannistelrooy
क्या सेवा में ऐसे तरीके / कार्य शामिल हो सकते हैं जो CRUD के गुणों / चर में हो सकते हैं $rootScope?
— jezmck
44

हालांकि पहले दृष्टिकोण को 'कोणीय जैसे' दृष्टिकोण के रूप में वकालत की जाती है, मुझे लगता है कि यह ओवरहेड्स को जोड़ता है।

विचार करें कि क्या मैं 10 विभिन्न नियंत्रकों में इस myservice.foo फ़ंक्शन का उपयोग करना चाहता हूं। मुझे इस 'myService' निर्भरता को निर्दिष्ट करना होगा और फिर उन सभी दसों में $ स्कोप.फॉल-स्कोप की प्रॉपर्टी। यह केवल एक दोहराव है और किसी तरह DRY सिद्धांत का उल्लंघन करता है।

जबकि, अगर मैं $ rootScope दृष्टिकोण का उपयोग करता हूं, तो मैं केवल एक बार इस वैश्विक फ़ंक्शन gobalFoo को निर्दिष्ट करता हूं और यह मेरे सभी भविष्य के नियंत्रकों में उपलब्ध होगा, चाहे कितना भी हो।

— Praym
स्रोत
5
नियंत्रकों के 'दस्तावेजीकरण' में कुछ मूल्य हो सकते हैं जहां उन्हें वह वैश्विक सेवा कॉल मिलती है। यदि आप एक अन्य एप्लिकेशन में अपने नियंत्रकों में से एक थे, तो यह कम स्पष्ट होगा कि वैश्विक समारोह कहां से आया है। मैं यद्यपि आपके तर्क को पहचानता हूँ।
— मैथ्यू पायने
यदि आपको इसे दृश्य से कॉल करने की आवश्यकता है, तो इसे केवल कार्यक्षेत्र में लाना होगा। नियंत्रक में, आप इसे सीधे सेवा से कॉल कर सकते हैं।
— mcv
10
यह एक टिप्पणी नहीं एक जवाब है
— इलियट
$ rootScope वैरिएबल हमेशा पेज रिफ्रेश पर शून्य होता है उस स्थिति में आपको फंक्शन नहीं मिलेगा। यही कारण है कि सेवा को इंजेक्ट करने और आवेदन में इसके संदर्भ का उपयोग करने के लिए अच्छा है।
— एहसान हाफ़िज़
4

AngularJs में " Services " और " Factories " हैं, जैसे आपकी समस्याओं के लिए। इन चीज़ों का उपयोग नियंत्रकों, निर्देशों, अन्य सेवाओं या किसी अन्य angularjs घटकों के बीच कुछ वैश्विक करने के लिए किया जाता है। आप फ़ंक्शंस को परिभाषित कर सकते हैं, डेटा स्टोर कर सकते हैं, फ़ंक्शन की गणना कर सकते हैं या जो कुछ भी आप कर सकते हैं अंदर चाहते सेवा और उन्हें AngularJS अवयव में उपयोग वैश्विक .like

angular.module('MyModule', [...])
  .service('MyService', ['$http', function($http){
    return {
       users: [...],
       getUserFriends: function(userId){
          return $http({
            method: 'GET',
            url: '/api/user/friends/' + userId
          });
       }
       ....
    }
  }])

अगर आपको और चाहिए

हम क्यों AngularJs सेवाओं और कारखानों की आवश्यकता के बारे में अधिक जानकारी प्राप्त करें

— हज़ारपते तुनयान
स्रोत
0

मैं कोणीय के लिए थोड़ा नया हूँ, लेकिन मुझे जो करने के लिए उपयोगी (और बहुत सरल) मिला है, क्या मुझे एक वैश्विक स्क्रिप्ट बनायी जाती है जिसे मैं स्थानीय स्क्रिप्ट के साथ स्थानीय स्क्रिप्ट से पहले अपने पेज पर लोड करता हूं जिसे मुझे वैसे भी सभी पृष्ठों पर पहुंचने की आवश्यकता है। उस स्क्रिप्ट में, मैंने "GlobalFunctions" नामक एक ऑब्जेक्ट बनाया और उन कार्यों को जोड़ा जिन्हें मुझे विश्व स्तर पर गुणों के रूप में एक्सेस करने की आवश्यकता है। उदा globalFunctions.foo = myFunc();। फिर, प्रत्येक स्थानीय लिपि में, मैंने लिखा$scope.globalFunctions = globalFunctions; और मैंने तुरंत किसी भी फ़ंक्शन तक पहुंच प्राप्त की, जिसे मैंने वैश्विक लिपि में GlobalFunctions ऑब्जेक्ट में जोड़ा है।

यह थोड़ा सा वर्कअराउंड है और मुझे यकीन नहीं है कि यह आपकी मदद करता है, लेकिन इससे मुझे निश्चित रूप से मदद मिली क्योंकि मेरे पास कई कार्य थे और यह उन सभी को प्रत्येक पृष्ठ पर जोड़ने के लिए एक दर्द था।

— इज़ी
स्रोत
1
मैं नीचे क्यों उत्सुक हूँ? मैं नया हूं और पेशेवरों से जानना चाहूंगा।
— इज़्ज़ल
मेरे लिए एक काम कर समाधान की तरह लगता है। केवल एक चीज जिसकी मैं वकालत करूंगा, यह सुनिश्चित करने के लिए कि आपका दायरा पर्याप्त रूप से अलग-थलग है, एक वैश्विक रूट जावास्क्रिप्ट उपयोगिता वर्ग बनाना है और अपनी उपयोगिता विधियों को इससे दूर रखना है ताकि आप गलती से किसी अन्य फ़ंक्शन नाम पर कदम न रखें कोणीय द्वारा इंजेक्ट की गई चीजों का विशाल समुद्र।
— जेई कार्टर द्वितीय 19
एक बात ध्यान दें, और शायद यह क्यों अस्वीकृत है, आप केवल अपने टेम्पलेट में उन फ़ंक्शन का उपयोग कर सकते हैं, आपके .ts मॉड्यूल के रूप में नहीं जो आपके फ़ंक्शन कॉल को संकलन समय पर हल नहीं करेगा। यह इसे "कोणीय" तरीके से करने का कारण है। लेकिन, यदि आप केवल डेकोरेटर और इस तरह के अपने टेम्पलेट्स में जोड़ना चाहते हैं, तो एक वैश्विक उपयोगिता फ़ाइल सरल और ठीक है।
— जेई कार्टर II 20
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.