Question

我写了一个指令，当你专注于它的标签并点击空格键时成功选择一个单选按钮。但是 - 即使单选按钮被选中，它也不会运行ng-change函数action()

这是HTML：

<input type="radio" value="Yes" ng-model="aModel" name="bool" id="yes" ng-change="action()">
<label space-select for="yes" name="bool">Yes</label>

这是我的指示：

.directive('spaceSelect', ['$rootScope', '$timeout', function($rootScope, $timeout){
            return {
                restrict: 'A',
                link: function(scope, element, attrs){  
                    var selectEvent = function(e){
                        if(e.keyCode === 32){
                            e.preventDefault();
                            element.click();
                        } 
                        };
                    element.bind('focus', function(event){
                        console.log('adding');
                        document.addEventListener('keypress', selectEvent);
                    });
                    element.bind('blur', function(e){
                        console.log('removing');
                        document.removeEventListener('keypress', selectEvent);
                    })
                }
            }
        }]);

将它包装在safeApply或$ timeout中没有帮助。

知道可能导致这种情况的原因吗？

编辑：JSFIDDLE

Answer 1

我在评论中为优秀的人创建JSFiddle时解决了这个问题。

原来我需要使用e.target.click();代替element.click()。

不完全确定更新ng-change的原因，但确实如此。我认为这是因为e.target直接引用DOM元素，element引用角元素。

这是工作小提琴：http://jsfiddle.net/je8omc3r/

触发点击标签不会在其单选按钮上运行ng-change

1 个答案: