AngularJs, Tutorial AngularJs - Funktion an Directive reichen

Das Ziel ist es eine Funktion im Controller zu deklarieren, diese aber in der Directive aufzurufen.
Somit lassen sich große Teile des Controller-Code auslagern.
z.B.: für einen File-Upload

Dazu verwendet man in der Directive das '&'-Binding.

Vorraussetzung:

Angular 1.5.x - link
Editor

Downloads:

Beispiel

Controller erstellen

app.controller("HomeController", function($scope) {
    $scope.vm = vm = this;
    vm.testOne = function() {
        console.log(„test-one“);
    }
}

Directive erstellen

Binding in scope: { testOne: '&' } ist an dieser Stelle zu beachten!

app.directive("mydirective", function() {
    return {
        restrict: "EA",
        templateUrl: "directives/myDirectiveTemplate.html",
        replace: false,
        scope: {
            testOne: "&"
        },
        link: function(scope, element, attrs) {
        }
    }
});

Directive Template erstllen

Hier fügen wir einfach einen Button hinzu, der die Funktion aufrufen soll

<button ng-click="testOne()">click me</button>

Directive in View integrieren

und die Controller Funktion durchreichen

Merke:
Das Binding des Scope ist „testOne“, aber im view muss es „test-one“ sein.

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien.

AngularJs – Funktion an Directive reichen

Tutorial AngularJs