Wywołanie angularjs funkcję z poza zakresem kątowym App

Question

Widziałem wiele pytań dotyczących tej kwestii, ale nie rozwiązanie Próbowałem pracuje:

Wewnątrz folderu publicznego Mam app plik o nazwie js gdzie mogę określić moje angularjs aplikację tak:

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

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

i w końcu pliku zrobić bootstrap jak:

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

Następnie, w tym samym folderze, a wewnątrz t On HTML mój punkt wyjścia dla zastosowania angularjs jest tak:

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

Następnie w innym folderze, mam innego pliku JS, gdzie muszę wywołać określoną funkcję, która jest zdefiniowana w kodzie angularjs. Funkcja nazywa się Draw() i uruchamia się po kliknięciu przycisku AngularJS.

po prostu wywołać funkcję wewnątrz innego pliku bez klikania na jakikolwiek przycisk robię coś takiego:

 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: Aby uczynić moje pytanie nieco bardziej jasne, mogę być może dodać kilka dodatkowych szczegółów:

Potrzebuję tylko jednego kontrolera i jednego modułu kontrolującego całą moją aplikację, ponieważ wszystkie wymagane działania (które wywołują 3 funkcje, które aktualizują obraz SVG) są względnie samodzielne, więc nie mogę Sądzę, że istnieje potrzeba dodania złożoności do kodu po stronie klienta, który może tylko mylić ja i inni ludzie pracujący ze mną.

Aby przywołać to, czego potrzebuję:

wewnątrz pojedynczej aplikacji, za pomocą jednego kontrolera, mam jedną funkcję, Draw (someInputValue), który jest generowanie rysunku SVG. Dane wejściowe dla tej funkcji są odbierane z pola wprowadzania tekstu.

W innym pliku mam akcje JS, które są wykonywane po kliknięciu innego pola tekstowego (na przykład, pokaż alert lub utworzenie dodatkowego pola tekstowego). To, czego chcę, to powiązanie wywołania funkcji Draw (input) po kliknięciu pola tekstowego.

Mianowicie, chcę zasymulować zachowanie, które mam, gdy kliknę przycisk, który odczytuje liczbę z pola tekstowego i wykonuje pewne czynności, ale zamiast tego, wprowadzanie danych wprowadzanych ręcznie na polu tekstowym i kliknięciu na przycisku chcę po prostu kliknąć pole tekstowe i wykonać tę samą akcję.

Answer 1

w tym przypadku, możesz użyć $ transmitowane do przekazywania wiadomości/danych i używać $ aby wykonać działanie.

Ta praktyka powinna być jednak ograniczona i używana mądrze, aby zapewnić, że nie spadnie zauważalna wydajność na drodze.

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

Answer 2

Wierzę, że Understanding Angular’s $scope and $rootScope event system $emit, $broadcast and $on może w tym pomóc.

Jak widać, jeśli użyjesz $scope.$emit, uruchomi ono zdarzenie do $scope i od tego, jeśli użyjesz $scope.$broadcast, wywoła to zdarzenie.

Na koniec, używając $scope.$on, będziesz słuchać tych wydarzeń.

Jak można lepiej zrozumieć, z następnym przykładzie:

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

kod 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'); 
}