Aufruf der Methode in der Direktivensteuerung von einer anderen Steuerung

Ich habe eine Direktive, die einen eigenen Controller hat. Siehe den folgenden Code:

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'
    }

});

Dies soll ein Benachrichtigungssystem für Fehler / Benachrichtigungen / Warnungen sein. Ich möchte von einer anderen Steuerung (keine Direktive) die Funktion showauf dieser Steuerung aufrufen . Und wenn ich das mache, möchte ich auch, dass meine Link-Funktion erkennt, dass sich einige Eigenschaften geändert haben, und einige Animationen ausführt.

Hier ist ein Code, der veranschaulicht, wonach ich frage:

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

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

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

Wenn Sie also showden popdownDirektiven-Controller aufrufen , sollte auch die Link-Funktion ausgelöst werden und eine Animation ausführen. Wie könnte ich das erreichen?

Dies ist eine interessante Frage, und ich begann darüber nachzudenken, wie ich so etwas implementieren würde.

Ich habe mir das ausgedacht (Geige) ;

Anstatt zu versuchen, eine Direktive von einem Controller aufzurufen, habe ich ein Modul erstellt, in dem die gesamte Popdown-Logik untergebracht ist:

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

Ich habe zwei Dinge in das Modul eingefügt , eine factoryfür die API, die überall directiveeingefügt werden kann, und die für die Definition des Verhaltens des tatsächlichen Popdown-Elements:

Die Fabrik definiert nur ein paar Funktionen successund errorund verfolgt die Spuren von ein paar Variablen:

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

Die Direktive ruft die API in ihren Controller ein und überwacht die API auf Änderungen (ich verwende zur Vereinfachung Bootstrap-CSS):

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

Dann definiere ich ein appModul, das abhängt von 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); }
});

Und der HTML sieht aus wie:

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

Ich bin mir nicht sicher, ob es völlig ideal ist, aber es schien ein vernünftiger Weg zu sein, die Kommunikation mit einer globalen Popdown-Direktive einzurichten.

Wieder als Referenz die Geige .

Sie können auch Ereignisse verwenden, um den Popdown auszulösen.

Hier ist eine Geige, die auf der Lösung von Satchmorun basiert. Es verzichtet auf die PopdownAPI und die Controller der obersten Ebene stattdessen auf $broadcastdie Ereignisse "Erfolg" und "Fehler" in der gesamten Bereichskette:

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

Das Popdown-Modul registriert dann Handlerfunktionen für diese Ereignisse, z.

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

Dies funktioniert zumindest und scheint mir eine gut entkoppelte Lösung zu sein. Ich werde andere einschalten lassen, wenn dies aus irgendeinem Grund als schlechte Praxis angesehen wird.

Sie können den Controller der Direktive auch dem übergeordneten Bereich aussetzen, wie dies ngFormbei nameAttributen der Fall ist: http://docs.angularjs.org/api/ng.directive:ngForm

Hier finden Sie ein sehr einfaches Beispiel, wie dies erreicht werden kann: http://plnkr.co/edit/Ps8OXrfpnePFvvdFgYJf?p=preview

In diesem Beispiel habe ich myDirectivemit dediziertem Controller mit $clearMethode (eine Art sehr einfache öffentliche API für die Direktive). Ich kann diesen Controller im übergeordneten Bereich veröffentlichen und diese Methode außerhalb der Direktive aufrufen.

Ich habe eine viel bessere Lösung.

Hier ist meine Direktive, ich habe die Objektreferenz in die Direktive eingefügt und diese durch Hinzufügen einer Aufruffunktion im Direktivencode erweitert.

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

Deklarieren der Direktive im HTML mit einem Parameter:

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

mein Controller:

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();
}];