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)
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)
我正在尝试为测验应用程序构建嵌套指令,其中外部指令对应一个问题,每个内部指令对应一个可能的答案。当用户单击答案时,它会禁用自身和其他选项,更改其颜色,并将 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)
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)