ディレクティブのコントローラーから「&」操作を介して、コントローラーのスコープからディレクティブに渡された関数を呼び出そうとしています。しかし、その方法は、Angularは未定義です。
これが私のコントローラーの関連部分です。ディレクティブに渡すメソッドが含まれています。
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;
});
};
}]);
これが私の指示です。 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();
}
});
};
},
};
}]);
そして、これは私のhtmlの関連部分です
<div ng-controller="PostCtrl">
<section class="side-bar panel hide-for-small">
<compose onPost="getPosts()"></compose>
</section>
<!--more, non-relevant html here-->
</div>
問題は私のpostalServiceサービスにあるのではないことを知っています。代わりに、ディレクティブは関数が渡されないことを報告します。なぜ??
交換する
<compose onPost="getPosts()"></compose>
と
<compose on-post="getPosts()"></compose>
そしてそれはうまくいきます。
Angular docs なぜそうなのかを言います:
ディレクティブには、ngBindなどのキャメルケース名があります。ディレクティブは、キャメルケース名をこれらの特殊文字:、-、または_を使用してスネークケースに変換することで呼び出すことができます。