각도 JS 문제가있는 부트 스트랩 Datepicker (다시)

Question

편집 할 수있는 dateField가있는 편집 가능한 Grid를 만들려고합니다. 셀은 셀 내가 is-open="true"를 사용하고 있지 않다 경우 다음의 editableCellTemplate에서

$scope.gridOptions = { 
      data: 'result', 
      enableCellSelection: true, 
      enableRowSelection: false, 
      enableCellEditOnFocus: true, 
      multiSelect: false, 
      columnDefs: [ 
       { field: 'name',  displayName: 'Name',    enableCellEdit: false, width: 60 }, 
       { field: 'age',  displayName: 'Age',     enableCellEdit: false, width: 60 }, 
       { field: 'sex',  displayName: 'Sex',     enableCellEdit: false, width: 90 }, 
       { field: 'dob',  displayName: 'DOB',     width: 150, 
        editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" is-open="true" ng-input="COL_FIELD" ng-model="COL_FIELD" datepicker-append-to-body=true />', 


       }         
      ] 
      }; 

을 집중 오지 않아 팝업 경우에만 편집 가능한 표시됩니다. ng-input="COL_FIELD"을 사용하지 않으면 포커스가 모든 셀에서 제거되지 않습니다. 그래서, datepicker 숨어지고 있지 않습니다.하지만 만약 내가 그때 둘 다 사용하고, 가치가 선택되지 않습니다. 콘솔에서 오류가 나타납니다 Expression 'true' used with directive 'datepickerPopup' is non-assignable!

거기에 대한 stackoverflow에 대한 많은 질문이 있습니다. 나는 거의 모든 것을 시도했지만 성공하지는 못했다.

수행 할 수있는 작업은 무엇입니까? 오류를 제거하려면 어떻게해야합니까? 제발 내게 일하는 plunker를 제공해주세요. 나는 plunker로이 문제를 만들 수 없습니다.

편집하는 것은

내가 생각하는, 내가 오류를 제거 할 수 없습니다. 이 오류는 여전히

Expression 'true' used with directive 'datepickerPopup' is non-assignable!

내가 그것을 어떻게 제거 할 수 있습니다 동일한? 그것을 제거한 후에, 나는 그것이 효과가있을 것이라고 확신합니다. 나는 그것을 범위 변수로 가져 와서 그것을 참조하려고했으나 값이 Inspect 요소를 사용하여 검사 할 때 true로 대체되지 않습니다. 변수로 사용하고 'is-open="' + $scope.dateFormat.opened + '"' 같은 템플릿의 값을 연결하는 경우에도 여전히 동일한 오류가 있습니다.

편집 2

이 is-open 무엇을 위해 사용됩니까? 어딘가에 나는 true에 그 값 equlas를, 어딘가에 단지 opened으로 본다. 예를 들어 here in Stackoverflow 이상인 경우 opened1 및 opened2입니다. 이게 뭐야? 어떻게 사용합니까? 하지만, (i는 bcombs로 한 방법을 사용하고있는 경우)

제가 상기 디버깅 후에 bcombs 기술

편집 3

를 사용하여 오차를 제거 한 난을, 날짜 선택기가 열려지고 것으로 열리는 즉시 닫힙니다. 내가 결론을 내렸다 무엇보다 조작에서

 $scope.$on('ngGridEventStartCellEdit', function() { 
     debugger; 
    }); 

편집 4 는 ng-input를 사용하는 경우, 다음 바인딩이 방법을 나누기 입니다. 즉 u가 날짜 값 텍스트 필드를 변경하면 datePicker에서 반영되지만 datePicker를 사용하여 값을 변경하려고하면 textField에 반영되지 않습니다.

ng-input을 제거하면이 2 방향 바인딩이 올바르게 작동하므로 올바르게 작동하지만 ngGridEventEndCellEdit 이벤트가 시작되지 않습니다. 그래서 초점은 사라지지 않습니다. 값이 선택되고 datePicker가 닫히고 있습니다 (인 경우 enableCellEdit:true을 사용). 그러나 포커스는 textField에 남아 있습니다.

도움이 필요합니다.나는 그 확신한다

: 업데이트가 문제

Answer 1

내가 부트 스트랩 지침 또는 각 구현에 전문가는 아니지만 해결하는 데 도움이 ...하지만 직접 버그를 제거하는 방법의 질문에 대답 희망 is-open 속성은 원시 값일 수 없습니다. 이 특정 위젯이 열려 있는지 (부울) 상태를 유지하는 변수 여야합니다.

openDatePickers : 내 코드에서, 나는 같은 내 모든 datepickers, 이러한 플래그를 유지하는 하나의 객체를 사용

그런 다음 {}의 cellTemplate 문자열에, 나는 그런으로 고유 ID를 부여 :

'일 오픈 = "openDatePickers [\'DOB _ {{row.entity.name}} \ ']"'

나는 당신의 예에 맞게 "이름"속성을 사용하고

(주하지만, 유일한 ID가 선호됩니다). 응답

편집 댓글을 :
celltemplate는 컨트롤러 범위에 대한 액세스 권한을, 가장 간단한 방법은 단순히 선언하는 것입니다 그래서 :
$ scope.openDatePickers = {};

이 작동 방식은 사용하는 코드베이스에 따라 조금씩 다릅니다.
저는 angular-ui를 사용하고 있고 1140 줄의 ui-bootstrap-tpls-0.8.0.js에서 지시어가 "is-open"속성을 관리하는 곳을 볼 수 있습니다.
특성이 제공되지 않으면 지시문은이 플래그를 내부적으로 클로저와 함께 관리하지만 특성이 제공되면 동작이 다릅니다. 할당이 작동하는 방식은 두 경우 모두 직관적입니다. 변수 (내부 클로저 또는 속성에서 제공 한 변수)가 상태간에 간단히 전환됩니다. 디버깅
지금까지와 같은 초점 건에 응답

편집 : NG-입력 또는 enableCellEditOnFocus을 사용하지 마십시오.
enableCellSelection : 내가 사용합니까 허용하는 진정한
을 ... 그리고 우리의 클라이언트가 필드를 수동으로 편집을 원하지 않았다, 그래서 내 입력 요소가 있습니다

이를
NG-읽기 전용 = "true"로 사용 사례에서 입력 필드를 수동으로 수정할 필요가없는 한 문제에 대한 기능상의 해결 방법이어야합니다.