требуется для пользовательской директивы select

Question

Я создал свой собственный выпадающий список, используя неупорядоченный список и ng-repeat. Проблема с этой директивой заключается в том, что она не работает как обычный select/input/textarea, где вы можете использовать ее при использовании в html-форме.

Как я могу реализовать требуемую опцию/ng-required (как директиву) с проверкой в ​​пользовательской директиве?

Должен ли я использовать собственную реализацию проверки?

dropdown.html

<!-- displayed text on the select --> 
<div class="title" 
    ng-class="{'placeholder': !hasSelected(), 'selected': isOpened}" 
    ng-mousedown="openSelect()"> 
    {{getTitle()}} 

    <div class="icon" ng-class="{'active': isOpened}"> 
     <i class="fa fa-caret-down"></i> 
    </div> 
</div> 

<!-- displayed options when opening the select dropdown --> 
<div class="options"> 
    <ul ng-show="isOpened"> 

     <!-- First option is only shown when an empty option is required --> 
     <li ng-click="select(null)" 
      ng-show="hasEmptyOption() && isSelected()" 
      class="empty"> 
      {{empty}} 
     </li> 

     <!-- Options of the select --> 
     <li ng-repeat="option in options track by $index" 
      ng-click="select($index)" 
      ng-class="{'active': isActive($index)}"> 
      {{option}} 
     </li> 
    </ul> 
</div> 

dropdown.js

app.module.directive('dropdown', ['$document', 
    function ($document) { 
     'use strict'; 

     return{ 
      restrict: "E", 
      scope: { 
       model: "=", 
       empty: "@", 
       message: "@", 
       options: "=" 
      }, 
      templateUrl: 'app/common/directive/dropdown/dropdown.partial.html', 
      link: function (scope, elem, attrs) { 
       scope.message = "My message"; 
       scope.isOpened = false; 

       scope.isSelected = function() { 
        return scope.model && scope.model !== null; 
       }; 

       scope.hasEmptyOption = function() { 
        return scope.empty && scope.empty !== null; 
       }; 

       scope.hasSelected = function() { 
        return (scope.selected); 
       }; 

       scope.select = function (index) { 
        if (index !== null) { 
         scope.model = scope.options[index]; 
        } else { 
         scope.model = null; 
        } 
        scope.closeSelect(); 
       }; 

       scope.closeSelect = function() { 
        scope.isOpened = false; 
        $document.unbind('click'); 
        elem.unbind('click'); 
       }; 

       scope.openSelect = function() { 
        if (scope.isOpened) { 
         scope.closeSelect(); 
        } else { 
         scope.isOpened = true; 
         $document.bind('click', function() { 
          scope.closeSelect(); 
          scope.$apply(); 
         }); 
         elem.bind('click', function (e) { 
          e.stopPropagation(); 
         }); 
        } 
       }; 

       scope.getTitle = function() { 
        if (scope.model && scope.model !== null) { 
         return scope.model; 
        } else if (scope.message) { 
         return scope.message; 
        } else { 
         return "Select"; 
        } 
       }; 
      } 
     }; 
    } 
]); 

использования

<dropdown message="Select state" model="selectedState" options="states" empty="unselect"></dropdown> 

Просмотр

Answer 1

Думаю, мне было немного поститься с вопросом. Простите за это. Но ответ очень полезная для всех остальных

использования

<dropdown message="Select state" model="selectedState" options="states" empty="unselect" valid-drop-down></dropdown> 

validation_dropdown.js

[EDIT] изменил директивы немного, так что лучше, чтобы понять, добавил комментарий

/** 
* Based on 
* http://stackoverflow.com/questions/24692775/angularjs-setvalidity-causing-modelvalue-to-not-update 
*/ 
app.module.directive('validDropDown', [ 
    function() { 
     return { 
      require: 'ngModel', 
      link: function (scope, elem, attr, ngModel) { 

       // Create validators 
       ngModel.$validators.validDropDown = function (modelValue, viewValue) { 
        /* When no value is present */ 
        var isValid; 
        if (!modelValue || modelValue.length === 0) { 
         isValid = false; 
        } else { 
         isValid = true; 
        } 

        /* Set required validator as this is not a standard html form input */ 
        ngModel.$setValidity('required', isValid); 

        /* Set custom validators */ 
        ngModel.$setValidity('validDropDown', isValid); 

        /* Return the model so the model is updated in the view */ 
        return modelValue; 
       }; 

       // Watch for changes to the model 
       scope.$watch(attr.ngModel, function() { 

        /* When the model is touched before */ 
        if (ngModel.$touched) { 
         /* When the model is not dirty, Set ngModel to dirty by re-applying its content */ 
         if (!ngModel.$dirty) { 
          ngModel.$setViewValue(ngModel.$modelValue); 
         } 
        } 

        /* When the model has a value */ 
        if (ngModel.$modelValue) { 
         /* When the model is not touched before */ 
         if (!ngModel.$touched) { 
          ngModel.$setTouched(); 
         } 
        } 

        return ngModel; 
       }); 

       // Validate on creation 
       ngModel.$validate(); 
      } 
     } 
    } 
]);