我正在尝试为测验应用程序构建嵌套指令，其中外部指令对应于一个问题，每个内部指令对应于一个可能的答案。当用户单击答案时，它会禁用自身和其他选项，更改其颜色，并将 POST 请求发送回服务器。
或者至少这是最终目标。目前，我试图让选择按钮调用“单击”功能并注销一条简单的消息。令我沮丧的是，我无法让 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()"
每次都没有成功。
我想使用链接函数而不是 Controller ，因为我想使用父指令的 Controller 来访问父问题的 id(并且能够在回答其任何选择时禁用该问题)。
编辑: 另外值得注意的是，我尝试添加:
ng-disable="disabled"
到选择指令并切换链接函数中的禁用变量并且有效。
最佳答案
错误的参数排序应为link: function(scope, element, attrs)
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')
}
}
};
};
如果你还需要一个 Controller ，它应该是最后一个参数link: function(scope, element, attrs,controller)
关于angularjs - ng-click 不在嵌套指令中触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31298659/