Geek Answers Handbook

AngularJS function call from outside the Angular application scope

I saw a lot of questions related to this question, but no solution I tried works:

Inside the public folder, I have a file called app.js, where I define my AngularJS application as follows:

var app = angular.module('app', []); var RectangleDim=30; app.controller('MainCtrl', function($scope, $http) {

And at the end of the file, I do bootstrap as:

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

Then, inside the same folder and inside HTML, my entry point for an AngularJS application is as follows:

  <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;">

Then in another folder I have another JS file where I need to call a specific function defined in AngularJS code. The function is called Draw (), and it fires when I click the AngularJS button.

To just call a function inside another file without clicking on any button, I do something like this:

  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

EDIT: To make my question more understandable, I can add a few details:

I need only one controller and one module that controls my entire application, because all the necessary actions (which call 3 functions that update the SVG image) are relatively autonomous, so I don’t think there is any need to add complexity to the client code that can only confuse me and other people working with me.

To remember what I need:

Inside a single application with one controller, I have one Draw (someInputValue) function that generates an SVG digit. The input for this function is taken from the input text box.

In another file, I have JS actions that are executed when I click on another text field (for example, show a warning or create an additional text field). I want to bind a Draw call (input) when I click on a text box.

Namely, I want to simulate the behavior that I have when I click on a button that reads a number from a text field and performs some actions, but instead has input manually entered into the text field and clicking on the button, I just want to click on the text field and perform the same action.

+6
source share
3 answers

In this case, you can use $ broadcast to send your messages / data and use $ on to perform the action.

However, this practice should be limited and reasonably used to ensure that you do not have noticeable performance straying along the road.

Work with $ scope. $ emit and $ scope. $ on

+3
source

HTML

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

JS code

 angular.module('MyModule', []) .controller('MyController', function ($scope) { $scope.myfunction = function (data) { alert("---" + data); }; }); window.onload = function () { angular.element(document.getElementById('YourElementId')).scope().myfunction('test'); }
+2
source

I believe Understanding Angular s $ scope and $ eventScope event system $ emit, $ broadcast and $ on can help with this.

As you can see, if you use $scope.$emit , it will generate an event up to $scope , and since if you use $scope.$emit , it will $scope.$emit event.

Finally, using $scope.$on , you will listen to these events.

As you can better understand in the following example:

 // 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' });
0
source

More articles:


All Articles