angularjs - entre - llamar funcion angular desde html

Llame a un método de un controlador desde otro controlador usando ''scope'' en AngularJS

Question

Intento llamar a un método de segundo controlador en el primer controlador utilizando la variable de scope . Este es un método en mi primer controlador:

$scope.initRestId = function(){
        var catapp = document.getElementById(''SecondApp'');
        var catscope = angular.element(catapp).scope();
        catscope.rest_id = $scope.user.username;
        catscope.getMainCategories();
    }; 

Puedo establecer el valor de rest_id pero no puedo llamar a getMainCategories por algún motivo. La consola muestra este error:

TypeError: Object # no tiene el método ''getMainCategories''

¿Hay alguna manera de llamar al método anterior?

Editar:

Usé el siguiente enfoque para cargar dos aplicaciones al mismo tiempo;

angular.bootstrap(document.getElementById(''firstAppID''), [''firstApp'']);
angular.bootstrap(document.getElementById(''secondAppID''), [''secondApp'']);

Definitivamente podría usar un servicio aquí, pero quería saber si hay otras opciones para hacer lo mismo.

Answer 1

Aquí hay una buena demostración en Fiddle sobre cómo usar el servicio compartido en directivas y otros controladores a través de $scope.$on

HTML

<div ng-controller="ControllerZero">
    <input ng-model="message" >
    <button ng-click="handleClick(message);">BROADCAST</button>
</div>

<div ng-controller="ControllerOne">
    <input ng-model="message" >
</div>

<div ng-controller="ControllerTwo">
    <input ng-model="message" >
</div>

<my-component ng-model="message"></my-component>

JS

var myModule = angular.module(''myModule'', []);

myModule.factory(''mySharedService'', function($rootScope) {
    var sharedService = {};

    sharedService.message = '''';

    sharedService.prepForBroadcast = function(msg) {
        this.message = msg;
        this.broadcastItem();
    };

    sharedService.broadcastItem = function() {
        $rootScope.$broadcast(''handleBroadcast'');
    };

    return sharedService;
});

De la misma manera, podemos usar el servicio compartido en la directiva. Podemos implementar la sección de controlador en la directiva y usar $scope.$on

myModule.directive(''myComponent'', function(mySharedService) {
    return {
        restrict: ''E'',
        controller: function($scope, $attrs, mySharedService) {
            $scope.$on(''handleBroadcast'', function() {
                $scope.message = ''Directive: '' + mySharedService.message;
            });
        },
        replace: true,
        template: ''<input>''
    };
});

Y aquí tres nuestros controladores donde ControllerZero usó como disparador para invocar prepForBroadcast

function ControllerZero($scope, sharedService) {
    $scope.handleClick = function(msg) {
        sharedService.prepForBroadcast(msg);
    };

    $scope.$on(''handleBroadcast'', function() {
        $scope.message = sharedService.message;
    });
}

function ControllerOne($scope, sharedService) {
    $scope.$on(''handleBroadcast'', function() {
        $scope.message = ''ONE: '' + sharedService.message;
    });
}

function ControllerTwo($scope, sharedService) {
    $scope.$on(''handleBroadcast'', function() {
        $scope.message = ''TWO: '' + sharedService.message;
    });
}

El ControllerOne y ControllerTwo escuchan el cambio de message utilizando $scope.$on controlador.

Answer 2

Cada controlador tiene su (s) propio (s) alcance (s) por lo que está causando su problema.

Tener dos controladores que desean acceder a la misma información es un signo clásico de que quiere un servicio . El equipo angular recomienda controladores delgados que son solo pegamento entre vistas y servicios. Y específicamente, "los servicios deberían tener estado compartido a través de los controladores".

Afortunadamente, hay un buen video de 15 minutos que describe exactamente esto (comunicación del controlador a través de servicios): video

Una de las autoras originales de Angular, Misko Hevery, discute esta recomendación (de usar servicios en esta situación) en su charla titulada Mejores prácticas angulares (omita a 28:08 para este tema, aunque recomiendo encarecidamente ver toda la charla).

Puede usar eventos, pero están diseñados solo para la comunicación entre dos partes que desean desacoplarse. En el video anterior, Misko señala cómo pueden hacer que tu aplicación sea más frágil. "La mayoría de las veces, los servicios de inyección y comunicación directa son preferidos y más sólidos" . (Vea el enlace de arriba a partir de las 53:37 para escucharlo hablar sobre esto)

Answer 3

El mejor enfoque para comunicarse entre los dos controladores es usar eventos.

Documentación de alcance

En este check out, $on , $broadcast y $emit .

En el caso de uso general, el uso de angular.element(catapp).scope() se diseñó para su uso fuera de los controladores angulares, como en los eventos jquery.

Idealmente en su uso usted escribiría un evento en el controlador 1 como:

$scope.$on("myEvent", function (event, args) {
   $scope.rest_id = args.username;
   $scope.getMainCategories();
});

Y en el segundo controlador que acabas de hacer

$scope.initRestId = function(){
   $scope.$broadcast("myEvent", {username: $scope.user.username });
};

Editar: se dio cuenta de que era comunicación entre dos módulos

¿Puedes intentar incluir el firstApp módulo de aplicación como una dependencia de la secondApp donde declaras el angular.module ? De esa forma puedes comunicarte con la otra aplicación.