एक कोणीय अनुप्रयोग

Question

के दायरे से बाहर से एक AngularJS समारोह इस मामले से संबंधित सवालों का एक बहुत कॉलिंग मैंने देखा है, लेकिन कोई समाधान मैं कोशिश की है काम कर रहा है:

अंदर फ़ोल्डर सार्वजनिक मैं एक फ़ाइल बुलाया एप्लिकेशन है, .js जहां मैं इस तरह मेरी AngularJS आवेदन को परिभाषित:

angular.bootstrap(document.getElementById('body'), ["app"]); 

फिर, एक ही फ़ोल्डर के अंदर और टी के अंदर:

var app = angular.module('app', []); 
var RectangleDim=30; 

app.controller('MainCtrl', function($scope, $http) { 

और फ़ाइल के अंत में मैं जैसे बूटस्ट्रैप करना वह HTML AngularJS के आवेदन के लिए अपने प्रवेश बिंदु इस तरह है:

<div id="body"> 
<div ng-controller="MainCtrl"> 
    <div class="col-sm-6 col-md-6 col-lg-6" style="background-color: #D2D7D3"> 

     <div style="padding:25px;"> 

फिर, किसी अन्य फ़ोल्डर पर, मैं एक और जे एस फ़ाइल है, जहां मैं एक विशेष समारोह है कि AngularJS कोड में परिभाषित किया गया है कॉल करने के लिए की जरूरत है। फ़ंक्शन को Draw() कहा जाता है और जब मैं एंगुलरजेएस बटन पर क्लिक करता हूं तो यह ट्रिगर होता है।

बस मैं कुछ इस तरह कर रहा हूँ किसी भी बटन पर क्लिक के बिना किसी अन्य फाइल के अंदर फ़ंक्शन को कॉल करने के लिए:

 var e = document.getElementById('body'); 
     var scope = angular.element(e).scope(); 
// update the model with a wrap in $apply(fn) which will refresh the view for us 
     scope.$apply(function() { 
      scope.Draw(NumQuest); 
     }); 
     //fim 

संपादित करें: आदेश में मेरे सवाल का एक सा और अधिक स्पष्ट बनाने के लिए, मैं शायद एक जोड़ सकते हैं कुछ और विवरण:

मुझे केवल एक नियंत्रक और एक ही मॉड्यूल होना चाहिए जो मेरे पूरे एप्लिकेशन को नियंत्रित करता है क्योंकि सभी कार्यों की आवश्यकता होती है (जो एक एसवीजी तस्वीर अपडेट करने वाले 3 कार्यों को कॉल कर रहा है) अपेक्षाकृत आत्मनिर्भर हैं, इसलिए मैं नहीं हूं ' टी क्लाइंट-साइड कोड में जटिलता जोड़ने की कोई ज़रूरत नहीं है, जो केवल भ्रमित हो सकती है मैं और मेरे साथ काम करने वाले अन्य लोग।

याद करने के लिए मैं क्या जरूरत है:

एक ही ऐप्लिकेशन के अंदर, एक नियंत्रक के साथ, मैं एक समारोह है, ड्रा (someInputValue), कि एक एसवीजी आंकड़ा पैदा कर रहा है। इस फ़ंक्शन के लिए इनपुट टेक्स्ट इनपुट बॉक्स से प्राप्त किया जा रहा है।

दूसरी फ़ाइल पर मेरे पास जेएस क्रियाएं होती हैं जो कि जब मैं किसी अन्य टेक्स्ट बॉक्स पर क्लिक करता हूं (उदाहरण के लिए, एक अलर्ट दिखाएं या अतिरिक्त टेक्स्ट बॉक्स बनाएं)। मैं चाहता हूं कि जब मैं टेक्स्ट बॉक्स पर क्लिक करता हूं तो ड्रॉ (इनपुट) पर कॉल को जोड़ना है।

अर्थात्, मैं उस व्यवहार पर अनुकरण करना चाहता हूं जब मैं एक बटन पर क्लिक करता हूं जो टेक्स्ट बॉक्स से एक संख्या पढ़ता है और कुछ क्रिया करता है, लेकिन इसके बजाए, टेक्स्ट बॉक्स पर हाथ से इनपुट इनपुट करने और क्लिक करने के बजाय एक बटन पर, मैं बस एक टेक्स्ट बॉक्स पर क्लिक करना चाहता हूं और एक ही क्रिया करता हूं।

Answer 1

इस मामले में, आप $ अपने संदेश/डेटा रिले करने के प्रसारण का उपयोग करने, और $ पर उपयोग कार्रवाई करने के लिए इच्छा हो सकती है।

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

Working with $scope.$emit and $scope.$on

Answer 2

मेरा मानना ​​है कि Understanding Angular’s $scope and $rootScope event system $emit, $broadcast and $on इस पर सहायता कर सकता है।

अगर आप $scope.$emit का उपयोग यह $scope अप करने के लिए और कहा कि जब से एक ईवेंट सक्रिय करेगा, यदि आप $scope.$broadcast का उपयोग घटना नीचे सक्रिय कर देगा आप देख सकते हैं।

अंततः $scope.$on का उपयोग करके आप इन घटनाओं के बारे में सुनेंगे।

आप अगले उदाहरण के साथ बेहतर समझ सकते हैं के रूप में:

// firing an event upwards 
$scope.$emit('myCustomEvent', 'Data to send'); 

// firing an event downwards 
$scope.$broadcast('myCustomEvent', { 
    someProp: 'Sending you an Object!' // send whatever you want 
}); 

// listen for the event in the relevant $scope 
$scope.$on('myCustomEvent', function (event, data) { 
    console.log(data); // 'Data to send' 
}); 

Answer 3

एचटीएमएल

<div id="YourElementId" ng-app='MyModule' ng-controller="MyController"> 
    Hi 
</div> 

जे एस कोड

angular.module('MyModule', []) 
    .controller('MyController', function ($scope) { 
    $scope.myfunction = function (data) { 
     alert("---" + data); 
    }; 
}); 

window.onload = function() { 
    angular.element(document.getElementById('YourElementId')).scope().myfunction('test'); 
}