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个参数，第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;
        };
    }
};

}）;

如果我将 required-select 指令包含在HTML中，默认情况下我的ngModel会变为qtTestData.mainVideo == undefined，结果我崩溃了...... 看起来ngModel已被指令覆盖......

有人知道如何修复它吗？谢谢，

Answer 1

您的指令没有任何问题，如果您从未设置$scope.qtTestData.mainVideo，它将自动为undefined。首先将其设置为某个默认值，您的代码将正常工作。

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

});

Answer 2

尝试更改指令的语法，而不是：

require: 'ngModel',

试试这个：

require: '^ngModel',

此示例可能对您有用here

Answer 3

通过删除

解决了该问题

ng-required="true"

来自应用自定义指令的元素。据我了解，我们不应在ng-required="true"上使用$validators一个元素

AngularJS - ngModel与自定义指令冲突

3 个答案: