AngularJS: Przekazanie funkcji do izolowanego zakresu dyrektywy, która ma zostać wywołana w jego kontrolerze?

Question

Próbuję wywołać funkcję przechodzącą z zakresu kontrolera do dyrektywy przez operację "&" z kontrolera dyrektywy. Metoda ta jest jednak uznawana przez Angular za niezdefiniowaną. Po przeczytaniu mojego kodu w kółko, przeszukiwaniu Internetu, a następnie powtarzaniu tego procesu, postanowiłem zwrócić się o pomoc tutaj.

Oto odpowiednia część mojego kontrolera. Zawiera metodę, którą przekazuję do mojej dyrektywy.

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; 
     }); 
    }; 
}]); 

Oto moja dyrektywa. Nie mogę się odwołać 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(); 
        } 
       }); 
      }; 
     }, 
    }; 
}]); 

A oto odpowiednia część mojego html

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

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

</div> 

wiem, że problem nie jest z mojej postalService Service. Zamiast tego dyrektywa zgłasza, że ​​nie przekazano jej żadnej funkcji. Czemu??

Answer 1

Wymień

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

z

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

i będzie ona działać.

Angular docs powiedzieć, dlaczego to jest tak:

dyrektyw wielbłądem obudowane nazwy, takie jak ngBind. Dyrektywa może być wywoływana przez tłumaczenie nazwy wielbłąda na wężową skrzynkę z tymi znakami specjalnymi:, -, lub _.