AngularJS와 :. 처음 제출 버튼을 클릭하면 바인드합니다이 $, 처음으로 바이올린에

Question

jsFiddle here

후 발사하지 관찰의 <input>가 올바르게에 집중됩니다 것을 알 수 있습니다. 후속 클릭에서 초점이 더 이상 설정되지 않습니다.

나는 submit()이 isFocused 변경할 때 $observe 콜백이 트리거 점점되지 않은 것으로 나타났습니다, 그래서 명시 적으로 변수를 재설정하는 blur 리스너를 추가하지만 그 중 하나가 도움이되지 않았다.

제출시 포커스 스틱을 어떻게 만듭니 까?

: Final working fiddle을 편집하십시오. $watch 대신 임의의 표현식을 사용하려고합니다.

Answer 1

요소를 보면 얼룩 콜백이 실행될 때 focus-on 속성이 false로 설정되어 있지 않음을 알 수 있습니다. 그 이유는 blur 함수가 각도의 범위를 벗어나므로 내부에서 변경 한 사항을 인식하지 못하기 때문입니다.

는 내가 형태로 실제 값을 나타 내기 위해 NG 모델을 필요로하기 때문에 이것에 대해 $apply

element.bind('blur', function() { 
    scope.$apply(function() { 
     scope.isFocused = false; 
     console.log('blur'); 
    }); 
}); 

http://jsfiddle.net/6vfGm/7/

Answer 2

focusOn 특성을 실제로 볼 수 있다고 생각하지 않습니다. 실제로는 지시문의 특성으로 존재하지 않기 때문입니다. <input focus-on='{{isFocused}}' />을 입력하면 focus-on이 실제로 사용자의 지시어 이름입니다.

대신을 시도해보십시오

HTML

<div ng-app='foo'> 
    <form ng-controller='FormCtrl' ng-submit='submit()'> 
     <input focus-on focused='isFocused' /> 
     <button>Submit</button> 
    </form> 
</div> 

자바 스크립트

app.directive('focusOn', function() { 
    return { 
     scope: { focused: '=' }, 
     link: function(scope, element) { 
      scope.$watch('focused', function (newValue) { 
       console.log('$watch', newValue) 
       if (newValue) { 
        element[0].focus();      
       } 
      }); 

      element.bind('blur', function() { 
       scope.focused = false; 
       scope.$apply(); // required so that the scope is updated correctly. 
       console.log('blur'); 
      }); 
     } 
    }; 
}); 

app.controller('FormCtrl', function ($scope) { 
    $scope.submit = function() { 
     $scope.isFocused = true; 
     console.log('submit'); 
    }; 
}); 

에게 내가 지시 범위에 isFocused 속성을 결합하는 focused 속성을 생성 (내가 가질 수 이름은입니다.,하지만 이상한 것 같아 <input type="text" focus-on focus-on="isFocused" />).

Here's 업데이트 된 jsFiddle

업데이트 : 속성 이름을 ng-model에서 focused으로 변경 했으므로 더 적절합니다.