Aufruf der Controller-Funktion aus der Anweisung mithilfe von bindToController

Question

Ich habe einen Bottom geschrieben, um zu sehen, wie bindToDirective verwendet wird, um Bereiche zu isolieren und den Direktiven-Controller zum Aufruf der Hauptcontrollerfunktion zu verwenden, aber ich mache etwas falsch. Könnten Sie vorschlagen?

Dies ist Plunker: http://plnkr.co/edit/UJLjTmIiHydHr8qRzAsX?p=preview

Codebeispiel:

.controller('Ctrl', function() { 
    var self = this; 
    self.func = function() { 
    console.log('In the controller function'); 
    }; 
}) 

.directive('myDirective', [ function() { 
    var self = {}; 
    self.link = function (scope, elem, attrs, ctrl) { 
     elem.bind('click', function() { 
      ctrl.ctrlFunc(); 
     }); 
     elem.addClass('fa fa-file-excel-o fa-lg'); 
    }; 
    return { 
     restrict: 'E', 
     scope: {}, 
     controller: function() { 
     }, 
     controllerAs: 'DirCtrl', 
     bindToController: { 
      ctrlFunc: '&' 
     }, 
     link: self.link 
    }; 
}]) 

html Probe Haupt-Controller-Funktion zuordnen Direktive:

<div ng-controller="Ctrl"> 
    <my-directive ctrlfunc="Ctrl.func()"></my-directive> 
</div> 

Answer 1

Sie haben eine Reihe von Fragen:

Sie benötigen einen Bindestrich in Ihrem Direktivenargumentnamen an d sollten Sie die Funktionsreferenz werden vorbei, nicht die Funktion direkt aufrufen (mit params):

<my-directive ctrl-func="ctrl.func"></my-directive> 

Zweitens Sie Alias-Syntax in Ihrem Controller (var self = this;) verwenden, aber nicht in der Vorlage. Sie müssen es die folgenden aktualisieren:

<div ng-controller="Ctrl as ctrl"> 
    <my-directive ctrl-func="ctrl.func"></my-directive> 
</div> 

schließlich mit der Funktion Referenz überliefern Zweiwege statt mit & bindend, da die Werte für die implizite Bewertung geht nach unten.

bindToController: { 
     ctrlFunc: '=' 
    }, 

Siehe Arbeits plunkr

Answer 2

Ich bin nicht sicher, Sie bindToController brauchen ...

Diese Version nennt Ihre Ctrl ‚s Funktion: http://plnkr.co/edit/Rxu5ZmmUAU8p63hR2Qge?p=preview

JS

angular.module('plunker', []) 
.controller('Ctrl', function($scope) { 
    $scope.func = function() { 
    console.log('In the controller function'); 
    }; 
}) angular.module('plunker', []) 

    .controller('Ctrl', function($scope) { 
    $scope.func = function() { 
     console.log('In the controller function'); 
    }; 
    }) 

    .directive('myDirective', [ function() { 
    return { 
     template: '<pre>[clickme]</pre>', 
     replace: true, 
     restrict: 'E', 
     scope: { 
      target: '&' 
     }, 
     link: function (scope, elem, attrs) { 
      elem.bind('click', function() { 
       var fn = scope.target && scope.target(scope); 
       fn && fn(); 
      }); 
      elem.addClass('fa fa-file-excel-o fa-lg'); 
     } 
    }; 
    }]) 

HTML

<div ng-controller="Ctrl"> 
    <my-directive target="func"></my-directive> 
</div>