AngularJs – Funktion an Directive reichen

Tutorial AngularJs

von Ardian Shala, 30.04.2016 - update: 19.05.2017
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. Full Stack Entwickler mit AngularJs, Angular, Ionic und C#.