ng-click 不触发嵌套指令

ng-click not firing in nested directives

我正在尝试为测验应用程序构建嵌套指令,其中外部指令对应一个问题,每个内部指令对应一个可能的答案。当用户单击答案时,它会禁用自身和其他选项,更改其颜色,并将 POST 请求发送回服务器。

或者至少这是最终目标。目前,我正在尝试让选择按钮调用 'click' 函数并注销一条简单消息。令我沮丧的是,我无法让 ng-click 执行任何操作。

这是重现该问题的代码的大幅简化版本:

<body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>

(function (){

angular.module('exercise', [])
.directive('question', QuestionDirective)
.directive('choice', ChoiceDirective);

function QuestionDirective() {
    return {
        restrict: 'AE',
        scope: true,
        controller: function($attrs, $scope) {
            $scope.question_id = $attrs['id'];
        },
    }
}

function ChoiceDirective() {
    return {
        restrict: 'AE',
        scope: true,
        require: '^question',
        link: function(controllerInstance, element, scope, attrs) {
            //this is firing!
            console.log(controllerInstance.question_id);
            scope.click = function(){
                console.log('click')
            }
        }
    }
}})();

</script>

<div ng-app='exercise'>
    <div question id="1" status="2">

         <p>
            1: Question?
         </p>

        <button choice
                ng-click="click()">choice 1</button>
    </div>
</div>
</body>

注意事项: 我在后端使用 Django,并且在检索页面时将一些数据嵌入到 DOM 属性中,因此我不想将 html 放入模板中。
我还使用 django 模板来创建一堆这样的问题和选择,在我的代码的简化版本中,选择成功地记录了它们各自的问题的 ID。

我试过:

ng-click="click()"
ng-click="scope.click()"
ng-click="$scope.click()"

都没有成功。

我想使用 link 函数而不是控制器,因为我想使用父指令的控制器来访问父问题的 ID(并且能够在任何选择时禁用问题已回答)。

编辑: 同样值得注意的是,我尝试添加:

ng-disable="disabled"

选择指令并在 link 函数中切换禁用的变量并且有效。

错误的参数排序应该是link: function(scope, element, attrs)

JSFiddle

angular.module('myApp', []).directive('choice', ChoiceDirective);

function ChoiceDirective() {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            //this is firing!
            scope.click = function(){
                console.log('click')
            }
        }
    };
};

如果你还需要一个控制器,它应该是最后一个参数link: function(scope, element, attrs, controller)