AngularJS:将函数传递给在其控制器中调用的指令的隔离范围?

the*_*ain 21 javascript angularjs angularjs-directive angularjs-scope

我试图通过指令控制器中的"&"操作将从控制器范围传递的函数调用到指令中.然而,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;
        });
    };
}]);
Run Code Online (Sandbox Code Playgroud)

这是我的指示.我无法调用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();
                    }
                });
            };
        },
    };
}]);
Run Code Online (Sandbox Code Playgroud)

这是我的HTML的相关部分

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

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

</div>
Run Code Online (Sandbox Code Playgroud)

我知道问题不在于我的邮政服务.相反,该指令报告没有函数传递给它.为什么??

Mic*_*ord 26

更换

<compose onPost="getPosts()"></compose>
Run Code Online (Sandbox Code Playgroud)

<compose on-post="getPosts()"></compose>
Run Code Online (Sandbox Code Playgroud)

它会工作的.

角文档说为什么它是如此:

指令有诸如ngBind之类的骆驼名称.可以通过将驼峰案例名称转换为具有以下特殊字符的蛇案例来调用该指令:, - 或_.

  • HTML本质上是不区分大小写的 - 属性onPost等同于属性onpost.因此,JavaScript的惯例camelCase ==> HTML snake-case是合理的. (4认同)