chiama una funzione AngularJS al di fuori della portata di un angolare App

Question

ho visto un sacco di domande relative a questo problema, ma nessuna soluzione che ho provato sta lavorando:

All'interno della cartella pubblica Ho un app file chiamato js dove io definisco la mia domanda AngularJS in questo modo:

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

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

e alla fine del file che faccio il bootstrap come:

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

Poi, all'interno della stessa cartella e dentro t egli HTML mio punto di ingresso per l'applicazione di AngularJS è come questo:

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

Poi, su un'altra cartella, ho un altro file JS, dove ho bisogno di chiamare una funzione specifica che è definito nel codice AngularJS. La funzione è chiamata Draw() e viene attivata quando faccio clic su un pulsante AngularJS.

Per chiamare semplicemente la funzione all'interno di un altro file senza fare clic su un pulsante che sto facendo qualcosa di simile:

 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: Al fine di rendere la mia domanda un po 'più chiaro, forse posso aggiungere una qualche altro dettaglio:

Ho solo bisogno di avere un controller e un singolo modulo che controllano la mia intera applicazione perché tutte le azioni necessarie (che chiama 3 funzioni che aggiornano un'immagine SVG) sono relativamente autosufficienti, quindi non lo faccio Penso che sia necessario aggiungere complessità al codice lato client, che potrebbe solo confondere io e altre persone che lavorano con me.

ricordare quanto serve:

All'interno di una singola applicazione, con un controller, ho una funzione Draw (someInputValue), che genera una figura SVG. L'input per questa funzione viene ricevuto da una casella di immissione del testo.

Su un altro file ho azioni JS che vengono eseguite quando faccio clic su un'altra casella di testo (ad esempio, mostra un avviso o crea una casella di testo aggiuntiva). Quello che voglio è associare una chiamata a Draw (input) quando clicco sulla casella di testo.

Vale a dire, voglio simulare il comportamento che ho quando faccio clic su un pulsante che legge un numero da una casella di testo e fa alcune azioni, ma, invece, di avere l'input introdotto a mano su una casella di testo e facendo clic su un pulsante, voglio semplicemente fare clic su una casella di testo ed eseguire la stessa azione.

Answer 1

In questo caso, si potrebbe desiderare di utilizzare $ trasmettere per trasmettere i vostri messaggi/dati e utilizzare $ a svolgere l'azione.

Questa pratica dovrebbe essere limitata, tuttavia, e utilizzata con saggezza per assicurare che non si abbia una prestazione notevole in fondo alla strada.

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

Answer 2

Credo che lo Understanding Angular’s $scope and $rootScope event system $emit, $broadcast and $on possa essere d'aiuto.

Come si può vedere se si utilizza $scope.$emit, verrà generato un evento fino al $scope e poiché, se si utilizza $scope.$broadcast, l'evento verrà attivato.

Infine utilizzando $scope.$on è come ascolterete per questi eventi.

Come si può capire meglio con l'esempio seguente:

// 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

HTML

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

codice JS

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

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