jQuery 使用事件侦听器的 AngularJS 自定义指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18452532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS custom directive using event listener
提问by sh3nan1gans
I am trying to create a custom directive that contains a text box that is shown, expanded and focused when a user clicks a button. And when the user clicks away from the expanded text box it should minimize, disappear and then show the original button. Here's what I have so far: http://jsfiddle.net/Z6RzD/152/
我正在尝试创建一个自定义指令，其中包含一个在用户单击按钮时显示、展开和聚焦的文本框。当用户点击扩展文本框时，它应该最小化，消失，然后显示原始按钮。这是我到目前为止所拥有的：http: //jsfiddle.net/Z6RzD/152/
Here is the section that I am having problems with:
这是我遇到问题的部分：
if (htmlTxtBox.addEventListener !== undefined) {
console.log("first");
htmlTxtBox.addEventListener('focus', setFocus(), false);
//this function is automatically called even when textBox is in focus
//htmlTxtBox.addEventListener('blur', setNoFocus(), false);
console.log("ifHasFocus: " + scope.showInput);
} else if (htmlTxtBox.attachEvent != undefined) {
console.log("second");
htmlTxtBox.attachEvent('onfocus', setFocus());
htmlTxtBox.attachEvent('onblur', setNoFocus());
} else {
console.log("third");
htmlTxtBox.onmouseover = setFocus();
htmlTxtBox.onmouseout = setNoFocus();
}
And the corresponding functions that run with the event listener:
以及与事件侦听器一起运行的相应函数：
function setFocus() {
scope.$apply('showInput = true');
console.log("setFocus: " + scope.showInput);
}
function setNoFocus(){
scope.$apply('showInput = false');
console.log("setNoFocus: " + scope.showInput);
}
My problem is that the setFocus and setNoFocus functions run no matter what. How can I structure these functions to where they run only when the textbox is focused or blurred? I appreciate any help. Thanks!
我的问题是 setFocus 和 setNoFocus 函数无论如何都会运行。仅当文本框聚焦或模糊时，如何将这些函数构建到它们运行的位置？我很感激任何帮助。谢谢！
回答by Michael Benford
Try this:
尝试这个：
myApp.directive('replybox', function($timeout) {
var linkFn = function(scope, element, attrs) {
scope.showInput = false;
var button = element.find('button');
var input = element.find('input');
button.bind("click", function() {
scope.showInput = true;
scope.$apply();
input[0].focus();
input.css({"width":"300px","transition":"1s"});
});
input.bind('blur', function() {
scope.showInput = false;
$timeout(function() { scope.$apply(); }, 1000);
input.css({'width':'0px', 'transition':'1s'});
});
};
...
jsFiddle here.
jsFiddle在这里。
回答by TApicella
Old question, but to address the actual issue:
老问题，但要解决实际问题：
I believe htmlTxtBox.addEventListener('focus', setFocus(), false);should have just setFocusinstead to pass the reference to the function rather than call it within the addEventListener call.
我相信htmlTxtBox.addEventListener('focus', setFocus(), false);应该只是setFocus将引用传递给函数，而不是在 addEventListener 调用中调用它。
