Inprog 액션()

Question

내가 input field 한 :

<input type="text" id="myId" ns-validate="" class="someClass" ng-model="Date" ng- 
focus="focus($event, 'Parameters')" ng-blur="blur($event)" tabindex="-1"> 

포커스 이벤트가이 방법에 결합한다 : 나는 blur()을 주석 경우

scope.focus = function (e, names) { 
      scope.dateSet = false; 
      $(e.currentTarget).blur(); 
      $(e.currentTarget).prop('readonly', true).addClass('focus'); 
     }; 

오류가 있지만 occures 없습니다 IE에서 읽기 전용 작업을 수행해야합니다.

이이이이 흐림 이벤트에 의해 발생할 수 있습니다이 방법에 결합되어

scope.blur = function (e) { 
      $(e.currentTarget).prop('readonly', false).removeClass('focus'); 
     }; 

그렇다면 크롬에서 IE 만도 실패한이 작업을하는 이유?

angular.module('xxx').directive('blurChecker', function() { 
return function (scope, element, attributes) { 
     scope.$watch(attributes.blurChecker, function(){ 
      element[0].blur(); 
    }) 
}; 
}); 

더 효과

blurChecker='true' 

를 HTML로 추가 : 의견 제안으로

내가이 지침을 만들려고. 어떤 아이디어?

Answer 1

지시어에서 항상 DOM 조작을 수행하십시오. 그렇게하면 조작하려는 DOM을보다 잘 제어 할 수 있습니다.

지시어 안에 link 함수를 사용하십시오. 범위 변수를 업데이트해야하기 때문입니다. 그런 다음 링크 기능 내의 요소에 흐림 & 포커스 이벤트를 바인딩합니다. 포커스에 "매개 변수"문자열을 전달할 때. 당신은 parameter="Parameters"

HTML

<input type="text" id="myId" ns-validate="" class="someClass" ng-model="Date" 
blur-checker parameter="Parameters" tabindex="-1"> 

지침이 당신을 도울 수

angular.module('tpmobile').directive('blurChecker', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var parameterName = attrs.parameter; //I don't know what it does here, but you can get parameter name here 
      element.on('blur', function(event) { 
       element.prop('readonly', false).removeClass('focus'); 
      }); 
      element.on('focus', function(e) { 
       scope.dateSet = false; 
       element.blur(); 
       element.prop('readonly', true).addClass('focus'); 
      }) 
     } 
    } 
}); 

희망처럼 요소 내부 속성을 언급하여 동일한 작업을 수행 할 수 있습니다. 감사.