AngularJS: inoltrare una funzione a un ambito isolato di una direttiva per essere chiamata all'interno del relativo controller?

Question

Sto provando a chiamare una funzione passata dall'ambito di un controllore in una direttiva tramite l'operazione "&" dal controller della direttiva. Questo metodo, tuttavia, viene rivendicato da Angular per essere indefinito. Dopo aver letto il mio codice più e più volte, perlustrando Internet, e poi ripetendo quel processo, ho deciso di rivolgermi per aiutare qui.

Ecco la parte rilevante del mio controller. Contiene il metodo che passo alla mia direttiva.

angular.module('myApp.controllers', []).controller('PostCtrl', ['$scope', 'postalService', function($scope, postalService) { 
    $scope.posts = []; 

    $scope.getPosts = function() { 
     postalService.getPosts(function(err, posts) { 
      if(err); 
      else $scope.posts = posts; 
     }); 
    }; 
}]); 

Ecco la mia direttiva. Non riesco a invocare onPost.

angular.module('myApp.directives', []).directive('compose', ['postalService', function(postalService) { 
    return { 
     restrict: 'E', 
     transclude: false, 
     replace: true, 
     scope: { 
      onPost: "&" //why will it not 
     }, 
     templateUrl: "partials/components/compose-partial.html", 
     controller: function($scope, postalService) { 
      $scope.title = ""; 
      $scope.content = ""; 
      $scope.newPost = function() { 
       postalService.newPost($scope.title, $scope.content, function(err) { 
        if(err) console.log(err + ":("); 
        else { 
         console.log("Success getting posts."); 
         //why can I not invoke onPost()?? 
         $scope.onPost(); 
        } 
       }); 
      }; 
     }, 
    }; 
}]); 

Ed ecco la parte rilevante del mio html

<div ng-controller="PostCtrl"> 
    <section class="side-bar panel hide-for-small"> 
     <compose onPost="getPosts()"></compose> 
    </section> 

    <!--more, non-relevant html here--> 

</div> 

So che il problema non è con il mio servizio PostalService. Invece, la direttiva riporta che non è stata passata alcuna funzione. Perché??

Answer 1

Sostituire

<compose onPost="getPosts()"></compose> 

con

<compose on-post="getPosts()"></compose> 

e che funzionerà.

Il Angular docs dire perché è così:

direttive hanno nomi cammello con carter quali ngBind. La direttiva può essere invocata traducendo il nome del caso cammello in caso di serpente con questi caratteri speciali :, -, o _.