javascript - 指令和表单验证中的 AngularJS 动态必需属性

Question

我有一个指令，它从 REST api 接收一个元素是否应该是必需的。现在，当属性设置为必需时，我似乎无法使表单无效。

因此，本质上我可以从下面的指令中动态添加“必需”属性，但它不会使表单无效。通过 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');   
            }
        }
    };
});

这是一个 jsfiddle来说明问题。而且，这是从我的其余 API 返回的示例 JSON

{
    race: false,
    martialStatus: true,
}

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

即:1.解决延迟 promise 以确保我的表单实际收到所需的字段以进行验证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');   
            }
        }
    };
});

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