javascript - ejemplos - llamar funcion angular desde html

Método de llamada en controlador de directivas desde otro controlador

Question

Tengo una directiva que tiene su propio controlador. Vea el siguiente código:

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

popdown.directive(''popdown'', function () {
    var PopdownController = function ($scope) {
        this.scope = $scope;
    }

    PopdownController.prototype = {
        show:function (message, type) {
            this.scope.message = message;
            this.scope.type = type;
        },

        hide:function () {
            this.scope.message = '''';
            this.scope.type = '''';
        }
    }

    var linkFn = function (scope, lElement, attrs, controller) {

    };

    return {
        controller: PopdownController,
        link: linkFn,
        replace: true,
        templateUrl: ''./partials/modules/popdown.html''
    }

});

Esto debe ser un sistema de notificación de errores / notificaciones / advertencias. Lo que quiero hacer es usar otro controlador (no uno de directivas) para llamar a la función show en este controlador. Y cuando lo haga, también me gustaría que mi función de enlace detecte que algunas propiedades cambiaron y realizar algunas animaciones.

Aquí hay un código para ejemplificar lo que estoy pidiendo:

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

app.controller(''IndexController'', function($scope, RestService) {
    var result = RestService.query();

    if(result.error) {
        popdown.notify(error.message, ''error'');
    }
});

Por lo tanto, cuando llame a show en el controlador de directivas popdown , la función de enlace también se debe activar y realizar una animación. ¿Cómo podría lograr eso?

Answer 1

Esta es una pregunta interesante, y comencé a pensar cómo implementaría algo como esto.

Se me ocurrió esto (violín) ;

Básicamente, en lugar de tratar de llamar a una directiva de un controlador, creé un módulo para albergar toda la lógica emergente:

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

Puse dos cosas en el módulo, una factory para la API que se puede inyectar en cualquier lugar, y la directive para definir el comportamiento del elemento real de la ventana emergente:

La fábrica solo define un par de funciones de success y error y realiza un seguimiento de un par de variables:

PopdownModule.factory(''PopdownAPI'', function() {
    return {
        status: null,
        message: null,
        success: function(msg) {
            this.status = ''success'';
            this.message = msg;
        },
        error: function(msg) {
            this.status = ''error'';
            this.message = msg;
        },
        clear: function() {
            this.status = null;
            this.message = null;
        }
    }
});

La directiva obtiene la API inyectada en su controlador, y mira la API para ver los cambios (estoy usando bootstrap css por conveniencia):

PopdownModule.directive(''popdown'', function() {
    return {
        restrict: ''E'',
        scope: {},
        replace: true,
        controller: function($scope, PopdownAPI) {
            $scope.show = false;
            $scope.api = PopdownAPI;

            $scope.$watch(''api.status'', toggledisplay)
            $scope.$watch(''api.message'', toggledisplay)

            $scope.hide = function() {
                $scope.show = false;
                $scope.api.clear();
            };

            function toggledisplay() {
                $scope.show = !!($scope.api.status && $scope.api.message);               
            }
        },
        template: ''<div class="alert alert-{{api.status}}" ng-show="show">'' +
                  ''  <button type="button" class="close" ng-click="hide()">&times;</button>'' +
                  ''  {{api.message}}'' +
                  ''</div>''
    }
})

Luego defino un módulo de app que depende de Popdown :

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

app.controller(''main'', function($scope, PopdownAPI) {
    $scope.success = function(msg) { PopdownAPI.success(msg); }
    $scope.error   = function(msg) { PopdownAPI.error(msg); }
});

Y el HTML se ve así:

<html ng-app="app">
    <body ng-controller="main">
        <popdown></popdown>
        <a class="btn" ng-click="success(''I am a success!'')">Succeed</a>
        <a class="btn" ng-click="error(''Alas, I am a failure!'')">Fail</a>
    </body>
</html>

No estoy seguro de si es completamente ideal, pero parecía una forma razonable de establecer una comunicación con una directiva emergente global.

De nuevo, como referencia, el violín .

Answer 2

También podría exponer el controlador de la directiva al ámbito principal, como lo hace ngForm con el atributo name : http://docs.angularjs.org/api/ng.directive:ngForm

Aquí puede encontrar un ejemplo muy básico de cómo se puede lograr http://plnkr.co/edit/Ps8OXrfpnePFvvdFgYJf?p=preview

En este ejemplo, tengo myDirective con un controlador dedicado con $clear method (una especie de API pública muy simple para la directiva). Puedo publicar este controlador en el alcance principal y usar llamar a este método fuera de la directiva.

Answer 3

También puede usar eventos para activar Popdown.

Aquí hay un violín basado en la solución de satchmorun. Se prescinde de PopdownAPI, y el controlador de nivel superior en lugar de $broadcast s ''éxito'' y ''error'' eventos en la cadena de alcance:

$scope.success = function(msg) { $scope.$broadcast(''success'', msg); };
$scope.error   = function(msg) { $scope.$broadcast(''error'', msg); };

El módulo Popdown luego registra las funciones del manejador para estos eventos, por ejemplo:

$scope.$on(''success'', function(event, msg) {
    $scope.status = ''success'';
    $scope.message = msg;
    $scope.toggleDisplay();
});

Esto funciona, al menos, y me parece una solución muy bien disociada. Dejaré que otros hablen si esto se considera una mala práctica por alguna razón.

Answer 4

Tengo una solución mucho mejor.

aquí está mi directiva, he insertado en referencia de objeto en directiva y lo he extendido al agregar función de invocación en código de directiva.

app.directive(''myDirective'', function () {
    return {
        restrict: ''E'',
        scope: {
        /*The object that passed from the cntroller*/
        objectToInject: ''='',
        },
        templateUrl: ''templates/myTemplate.html'',

        link: function ($scope, element, attrs) {
            /*This method will be called whet the ''objectToInject'' value is changes*/
            $scope.$watch(''objectToInject'', function (value) {
                /*Checking if the given value is not undefined*/
                if(value){
                $scope.Obj = value;
                    /*Injecting the Method*/
                    $scope.Obj.invoke = function(){
                        //Do something
                    }
                }    
            });
        }
    };
});

Declarar la directiva en el HTML con un parámetro:

<my-directive object-to-inject="injectedObject"></ my-directive>

mi controlador:

app.controller("myController", [''$scope'', function ($scope) {
   // object must be empty initialize,so it can be appended
    $scope.injectedObject = {};

    // now i can directly calling invoke function from here 
     $scope.injectedObject.invoke();
}];