AngularJS动态需要在指令和表单验证中的属性

Question

我有一个指令,用于接收REST API中是否需要元素.现在,当属性设置为required时,我似乎无法使表单无效.

因此,本质上我能够从下面的指令动态添加'required'属性,但它不会使表单无效.通过chrome查看我发现,即使存在必需属性,$ error数组中的必需条目也不存在.

app.directive('requireiftrue', function ($compile) {
    return {
        require: '?ngModel',
        link: function (scope, el, attrs, ngModel) {
            if (!ngModel) {
                return;
            }

            if(attrs.requireiftrue==="true"){
                console.log('should require');
                el.attr('required', true);
                $compile(el.contents())(scope);
            }
            else{
                console.log('should not require');   
            }
        }
    };
});

这是一个解释问题的方法.而且,这是从我的rest API返回的示例JSON

{
    race: false,
    martialStatus: true,
}

编辑:虽然接受的答案让我开始运行,但我仍然有很多需要做的事情.

即:1.解决延期承诺,以确保我的表单实际上收到必要的字段以进行验证2.观察我的'requireiftrue'属性

我的解决方案

模块配置:

function config($stateProvider) {
    $stateProvider

    .state('testState', {
        url: '/test/form',
        controller: 'TestCtrl',
        templateUrl: 'test/form/testForm.tpl.html',
        resolve: {
            formDefaultService: function getFormDefaults($q, dataservice) {
                // Set up a promise to return
                var deferred = $q.defer();
                var myData = dataservice.getFormDefaults();
                deferred.resolve(myData);

                return deferred.promise;
                //return 
            }
        },

        data: {
            pageTitle: 'Test Info'
        }
    });
}

最后,接收api数据的指令/ HTML:

指示:

.directive('requireiftrue', function ($compile) {
    return {
        require: '?ngModel',
        link: function (scope, el, attrs, ngModel) {
            if (!ngModel) {
                return;
            }
            attrs.$observe('requireiftrue', function(value){ 
                if(value==="true"){
                    el.attr('required', true);
                    el.removeAttr('requireiftrue');
                    $compile(el[0])(scope);
                }
            });
        }
    };
});

HTML:

<input max="40"
requireiftrue={{defaults.validation.name}}
validNumber
id="name"
name="name"
type="text"
ng-model="test.name"
class="form-control">

Answer 1

你有两个问题:第一个是el.contents()返回一个空数组.所以你应该做的第一件事就是把它改成el [0].但如果el.contents()工作,你会遇到更严重的问题.您本来一直在尝试编译一个指令,该指令将自身作为指令导致无限循环(直到浏览器以任何方式崩溃).所以这是修改后的代码:

var app = angular.module('form-example', []);

app.directive('requireiftrue', function ($compile) {
    return {
        require: '?ngModel',
        link: function (scope, el, attrs, ngModel) {
            if (!ngModel) {
                return;
            }

            if(attrs.requireiftrue==="true"){
                console.log('should require');
                el.attr('required', true);
                el.removeAttr('requireiftrue');
                $compile(el[0])(scope);
            }
            else{
                console.log('should not require');   
            }
        }
    };
});

但我应该注意到,现在这个指令是一次性的.如果模型将发生变化,则该指令将不再在该元素上处理它.