AngularJS. Jak wywołać funkcję kontrolera spoza komponentu kontrolera

Znalazłem przykład w Internecie.

Jakiś facet napisał ten kod i zadziałał idealnie

HTML

<div ng-cloak ng-app="ManagerApp">
    <div id="MainWrap" class="container" ng-controller="ManagerCtrl">
       <span class="label label-info label-ext">Exposing Controller Function outside the module via onClick function call</span>
       <button onClick='ajaxResultPost("Update:Name:With:JOHN","accept",true);'>click me</button>
       <br/> <span class="label label-warning label-ext" ng-bind="customParams.data"></span>
       <br/> <span class="label label-warning label-ext" ng-bind="customParams.type"></span>
       <br/> <span class="label label-warning label-ext" ng-bind="customParams.res"></span>
       <br/>
       <input type="text" ng-model="sampletext" size="60">
       <br/>
    </div>
</div>

JAVASCRIPT

var angularApp = angular.module('ManagerApp', []);
angularApp.controller('ManagerCtrl', ['$scope', function ($scope) {

$scope.customParams = {};

$scope.updateCustomRequest = function (data, type, res) {
    $scope.customParams.data = data;
    $scope.customParams.type = type;
    $scope.customParams.res = res;
    $scope.sampletext = "input text: " + data;
};



}]);

function ajaxResultPost(data, type, res) {
    var scope = angular.element(document.getElementById("MainWrap")).scope();
    scope.$apply(function () {
    scope.updateCustomRequest(data, type, res);
    });
}

Demo

*zrobiłem kilka modyfikacji, zobacz oryginał: font JSfiddle

Odpowiedź Dmitrija działa dobrze. Zrobiłem prosty przykład używając tej samej techniki.

Jsfiddle: http://jsfiddle.net/o895a8n8/5/

<button onclick="call()">Call Controller's method from outside</button>
<div  id="container" ng-app="" ng-controller="testController">
</div>

.

function call() {
    var scope = angular.element(document.getElementById('container')).scope();
      scope.$apply(function(){
        scope.msg = scope.msg + ' I am the newly addded message from the outside of the controller.';
    })
    alert(scope.returnHello());
}

function testController($scope) {
    $scope.msg = "Hello from a controller method.";
    $scope.returnHello = function() {
        return $scope.msg ; 
    }
}

Wolałbym włączyć fabrykę jako zależności od kontrolerów niż wstrzyknąć im własną linię kodu: http://jsfiddle.net/XqDxG/550/

myModule.factory('mySharedService', function($rootScope) {
    return sharedService = {thing:"value"};
});

function ControllerZero($scope, mySharedService) {
    $scope.thing = mySharedService.thing;

ControllerZero.$inject = ['$scope', 'mySharedService'];

Rozwiązanie angular.element(document.getElementById('ID')).scope().get() przestał działać dla mnie w angular 1.5.2. Sombody wspomnieć w komentarzu, że to nie działa w 1.4.9 również. Poprawiłem go przechowując zakres w zmiennej globalnej:

var scopeHolder;
angular.module('fooApp').controller('appCtrl', function ($scope) {
    $scope = function bar(){
        console.log("foo");        
    };
    scopeHolder = $scope;
})

Wywołanie z kodu niestandardowego:

scopeHolder.bar()

Jeśli chcesz ograniczyć zakres Tylko do tej metody. Aby zminimalizować ekspozycję całego zakresu. użyj następującej techniki.

var scopeHolder;
angular.module('fooApp').controller('appCtrl', function ($scope) {
    $scope.bar = function(){
        console.log("foo");        
    };
    scopeHolder = $scope.bar;
})

Wywołanie z kodu niestandardowego:

scopeHolder()

Warto zastanowić się, czy posiadanie menu bez powiązanego zakresu jest dobrym rozwiązaniem. To nie jest kanciasta droga.

Ale, jeśli jest to droga, którą musisz iść, możesz to zrobić, dodając funkcje do $rootScope, a następnie wewnątrz tych funkcji używając $broadcast do wysyłania zdarzeń. następnie twój kontroler używa $on do nasłuchiwania tych zdarzeń.

Kolejną rzeczą do rozważenia, jeśli skończysz z menu bez zakresu jest to, że jeśli masz wiele tras, to wszystkie kontrolery będą musiały posiadać własne funkcje upate I get. (zakładając, że masz wiele kontrolerów)

Używam do pracy z $http, gdy chcesz uzyskać jakieś informacje z zasobu wykonuję następujące czynności:

angular.module('services.value', [])

.service('Value', function($http, $q) {

var URL = "http://localhost:8080/myWeb/rest/";

var valid = false;

return {
    isValid: valid,
    getIsValid: function(callback){
        return $http.get(URL + email+'/'+password, {cache: false})
                    .success(function(data){
            if(data === 'true'){ valid = true; }
        }).then(callback);
    }}
    });

Oraz kod w kontrolerze:

angular.module('controllers.value', ['services.value'])

.controller('ValueController', function($scope, Value) {
    $scope.obtainValue = function(){
        Value.getIsValid(function(){$scope.printValue();});
    }

    $scope.printValue = function(){
        console.log("Do it, and value is " Value.isValid);
    }
}

Wysyłam do serwisu jaką funkcję należy wywołać w kontrolerze

Mam wiele tras i wiele kontrolerów, więc nie mogłem uzyskać zaakceptowanej odpowiedzi do pracy. Okazało się, że dodanie funkcji do okna działa:

fooModule.controller("fooViewModel", function ($scope, fooService, $http, $q, $routeParams, $window, $location, viewModelHelper, $interval) {
    $scope.initFoo = function () {
        // do angular stuff
    }
    var initialize = function () {
        $scope.initFoo();
    }

    initialize();

    window.fooreinit = initialize;

}

Wtedy poza kontrolerem można to zrobić:

function ElsewhereOnThePage() {
    if (typeof(fooreinit) == 'function') { fooreinit(); }
}

Jestem użytkownikiem Ionic framework i znalazłem ten, który konsekwentnie dostarcza bieżącego kontrolera $scope:

angular.element(document.querySelector('ion-view[nav-view="active"]')).scope()

Podejrzewam, że można to zmodyfikować tak, aby pasowało do większości scenariuszy niezależnie od frameworka (lub nie), znajdując zapytanie, które będzie kierowane do określonych elementów DOM, które są dostępne tylko podczas danej instancji kontrolera.