Richtige "eckige" Art und Weise, das Verhalten an die Richtlinie zu übergeben?

Question

Bei der Suche nach Informationen über Angular Richtlinien und vorbei Verhalten Richtlinien, bekomme ich auf einem Isolat Umfang in Richtung des Verfahrens zeigte endete als verbindlich, dh

scope: { 
    something: '&' 
} 

Die documentation für diese Funktionalität ein wenig verwirrend ist, und ich glaube nicht, dass es enden wird, was ich will.

Ich endete mit diesem Schnipsel (vereinfacht für die Kürze), das funktioniert, indem es eine Bereichsfunktion in HomeCtrl übergeben, und die Richtlinie funktioniert und ruft die Funktion auf. (Nur wenn es wichtig ist, gibt der echte Code ein Versprechen aus der Direktive zurück).

angular.module('app', []); 
 

 
angular.module('app') 
 
    .directive('passingFunction', 
 
    function() { 
 
     var changeFn, 
 
     bump = function() { 
 
      console.log('bump() called'); 
 
      internalValue++; 
 
      (changeFn || Function.prototype)(internalValue); 
 
     }, 
 
     internalValue = 42; 
 

 
     return { 
 
     template: '<button ng-click="bump()">Click me!</button>', 
 
     scope: { 
 
      onChange: '<' 
 
     }, 
 
     link: function(scope, element, attrs) { 
 
      if (angular.isFunction(scope.onChange)) { 
 
      changeFn = scope.onChange; 
 
      } 
 

 
      scope.bump = bump; 
 
     } 
 
     }; 
 
    }) 
 
    .controller('HomeCtrl', 
 
    function($scope) { 
 
     $scope.receive = function(value) { 
 
     console.log('receive() called'); 
 
     $scope.receivedData = value; 
 
     }; 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="HomeCtrl"> 
 
    <passing-function on-change="receive"></passing-function> 
 
    <p>Data from directive: {{receivedData}}</p> 
 
</div>

Ist das eine richtige "Angular" Art und Weise, dies zu erreichen? Dies scheint zu funktionieren.

Answer 1

Sie müssen die Funktion an die Direktive übergeben. Ich werde ein sehr kleines Beispiel machen.

On-Controller:

$scope.thisFn = thisFn(data) { console.log(data); }; 

In html:

<my-directive passed-fn="thisFn()"></my-directive> 

Auf Anweisung:

.directive('myDirective', [ 
() => { 
    return { 
     restrict: 'E', 
     scope: { 
     passFn: '&' 
     }, 
     template: '<div id="myDiv" ng-click="passFn(data)"></div>', 
     link: (scope) => { 
      scope.data = "test"; 
     } 
    } 
    }]);