AngularJS - конфликты ngModel с таможенной директивой

Question

У меня есть этот HTML:

<select id="mainVideo" class="form-control" required-select 
     ng-model="qtTestData.mainVideo" 
     ng-options="mainVideo for mainVideo in mainVideoSources" 
     ng-change="getSelectedData(qtTestDataBuffer,'mainVideo', qtTestData.mainVideo)" 
     name="mainVideo" 
     ng-required="true"> 
</select> 

Функция getSelectedData() принимает 3 аргумента, а третий является ngModel. Все работает, если я не использую свою собственную директиву required-select. Моя директива:

App.directive('requiredSelect', function() { 
return { 
    restrict: 'AE', 
    require: 'ngModel', 
    link: function(scope, element, attributes, ngModel) { 
     ngModel.$validators.requiredSelect = function(modelValue, viewValue) { 
      var value = modelValue || viewValue; 
      var requiredSelect = 'Please, select a value'; //TBD.. select first ngOption 
      return value != requiredSelect; 
     }; 
    } 
}; 

});

Если я включаю требуемый-выберите директиву в HTML, мой ngModel становится qtTestData.mainVideo == undefined по умолчанию, и в результате у меня вылетает ... Похоже ngModel была перезаписана с помощью директивы ...

ли кто-то знаете, как это исправить? Спасибо,

Answer 1

Попробуйте изменить синтаксис директивы требуя вместо этого:

require: 'ngModel', 

попробовать это:

require: '^ngModel', 

Этот пример может быть полезен для вас here

Answer 2

Там в ничего плохого в вашей директиве. Если вы никогда не установили $scope.qtTestData.mainVideo, это будет автоматически undefined. Сначала установите для него значение по умолчанию, и ваш код будет работать.

.controller('YourController', function($scope){ 
    $scope.mainVideoSources = [ 
     'Please, select a value', 
     'A', 
     'B' 
    ]; 
    $scope.qtTestData = { 
     mainVideo: 'Please, select a value' 
    }; 

}); 

Answer 3

Проблема была решена удалением

ng-required="true" 

от элемента, в котором применяется пользовательский директива. Как я понимаю, мы не должны использовать ng-required="true" с $validators на одном элементе