각도 요소가 컨트롤러에서 업데이트 된 후에 양식 요소가 유효하지 않습니다.

Question

이 부분은 fiddle을 참조하십시오. 필드에 포커스가 있으면 드롭 다운 상자가 나타납니다. 드롭 다운 상자에서 요소를 클릭하면 값이 모델 (categoryFilter)에서 업데이트되고 모델 상태는 ng-invalid에서 ng-valid으로 업데이트됩니다. 값을 제거하면 ng-invalid으로 돌아가고 값을 다시 선택하면 ng-valid으로 돌아갑니다. 즉, 완벽하게 작동합니다.

나는이 코드를 제 코드에 따라 만들었습니다. 내 코드 (컨트롤러 + 양식)가 정확히 동일하지만 항목을 선택하고 지우고 항목을 다시 선택한 후 어떤 이유로 든 필드는 ng-invalid으로 유지됩니다. go here 인 경우이 값을 직접 확인하여 값을 선택하고 제거한 다음 다시 선택하십시오. 양식 + 컨트롤러는 동일하지만 상태는 ng-invalid으로 표시됩니다. 문제가 어디 있니?

desktop.controller('StartClubModalController', function ($scope,$http,$modalInstance) { 


    $scope.$watch('categoryFilter', function(value) { 
     angular.element(categoryFilter).val(value); 
    }); 

    $scope.categories = [{"Category":{"id":"6","category":"Community"}},{"Category":{"id":"4","category":"Competitions"}},{"Category":{"id":"5","category":"Crossfit"}},{"Category":{"id":"2","category":"Fitness"}},{"Category":{"id":"3","category":"Sport"}},{"Category":{"id":"1","category":"Workout"}}]; 

    $scope.categoryDropDownClickEvent = function(value) {     
     $scope.categoryFilter = value; 
    }; 

}); 

Answer 1

먼저 DOM을 컨트롤러로 조작하는 것은 바람직하지 않습니다. 모든 DOM 조작/업데이트가 지시어로 구현됩니다. 지시문은 AngularJS를 사용하는 동안 jQuery 코드를 작성해야하는 곳입니다.

둘째, categoryFilter는 ng-model 그래서 당신이 $watch를 사용할 필요가 없습니다 것입니다 :

$scope.$watch('categoryFilter', function(value) { 
     angular.element(categoryFilter).val(value); 
    }); 

그것을 제거합니다. (자세한 것은 Angular의 장점입니다.)

언제든지 categoryFilter이 자동으로 업데이트되어야합니다.

이 데모 Fiddle