AngularJS-ngModel与自定义指令冲突

Question

I have this 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>

The function getSelectedData() takes 3 arguments, and 3rd is ngModel. Everything works if I do not use my custom directive required-select . My directive:

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;
        };
    }
};

});

If I include required-select directive into HTML, my ngModel becomes qtTestData.mainVideo == undefined by default and as result I have crashes... Looks like ngModel has been overwritten by the directive...

Does someone know how to fix it? Thanks,

Answer 1

There's nothing wrong with your directive, If you never set $scope.qtTestData.mainVideo it will automatically be undefined . Set it first to some default value, and your code will just work.

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

});

Answer 2

Try to change a syntax of directive requiring, instead of this:

require: 'ngModel',

try this:

require: '^ngModel',

This example may be useful for you here

Answer 3

The issue was fixed by removing

ng-required="true"

from the element where custom directive is applied. As I understand, we should not use ng-required="true" with $validators on one element