2

ユーザーがボタンをクリックすると表示、展開、フォーカスされるテキスト ボックスを含むカスタム ディレクティブを作成しようとしています。また、ユーザーが展開されたテキスト ボックスから離れた場所をクリックすると、最小化されて消え、元のボタンが表示されます。これが私がこれまでに持っているものです: http://jsfiddle.net/Z6RzD/152/

私が問題を抱えているセクションは次のとおりです。

  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();
}

また、イベント リスナーで実行される対応する関数は次のとおりです。

function setFocus()  {
        scope.$apply('showInput = true');
        console.log("setFocus: " + scope.showInput);    
    }
function setNoFocus(){
  scope.$apply('showInput = false');
  console.log("setNoFocus: " + scope.showInput);
}

私の問題は、 setFocus および setNoFocus 関数が何があっても実行されることです。テキストボックスがフォーカスされているかぼやけている場合にのみ実行されるようにこれらの関数を構成するにはどうすればよいですか? 助けていただければ幸いです。ありがとう！

4

2 に答える 2

5

これを試して：

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 。

于 2013-08-26T21:14:17.133 に答える