javascript AngularJS：将函数传递给要在其控制器内调用的指令的隔离范围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19215007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS : Passing a function to an isolated scope of a directive to be called within its controller?
提问by thebradbain
I'm trying to call a function passed from a controller's scope into a directive via the "&" operation from the directive's controller. That method, however, is claimed by Angular to be undefined. After reading my code over and over, scouring the internet, and then repeating that process, I've decided to turn to help here.
我试图通过指令控制器的“&”操作调用从控制器范围传递到指令的函数。然而，Angular 声称该方法是未定义的。在一遍又一遍地阅读我的代码，在互联网上搜索，然后重复这个过程之后，我决定在这里提供帮助。
Here's the relevant part of my controller. It contains the method I pass to my directive.
这是我的控制器的相关部分。它包含我传递给指令的方法。
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;
});
};
}]);
Here's my directive. I am unable to invoke onPost.
这是我的指示。我无法调用 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();
}
});
};
},
};
}]);
And here's the relevant part of my html
这是我的 html 的相关部分
<div ng-controller="PostCtrl">
<section class="side-bar panel hide-for-small">
<compose onPost="getPosts()"></compose>
</section>
<!--more, non-relevant html here-->
</div>
I know the problem is not with my postalService Service. Instead, the directive reports that no function is passed to it. Why??
我知道问题不在于我的 postalService 服务。相反，指令报告没有函数传递给它。为什么？？
回答by Michael Benford
Replace
代替
<compose onPost="getPosts()"></compose>
with
和
<compose on-post="getPosts()"></compose>
and it'll work.
它会起作用。
The Angular docssay why it's so:
该角文档说为什么它是如此：
Directives have camel cased names such as ngBind. The directive can be invoked by translating the camel case name into snake case with these special characters :, -, or _.
指令具有驼峰式命名，例如 ngBind。可以通过将驼峰命名法转换为带有这些特殊字符 :、- 或 _ 的蛇形命名法来调用该指令。
