AngularJS在指令中设置输入要求答案

【问题标题】：AngularJS Set Input Required in DirectiveAngularJS在指令中设置输入要求
【发布时间】：2014-11-24 01:48:20
【问题描述】：

我需要动态地使输入字段成为必需（或不需要），并希望在指令中设置此值。我知道有 ng-required 指令，可以设置为 ng-required="datamodel.required" 但最终，我想在指令中提取一个设置对象并根据该配置打开/关闭所需的参数。配置在服务中，我不想为每个表单控制器注入服务 - 因此我需要在指令中进行设置。

这是一个 JSFiddle 起点： http://jsfiddle.net/hm2b771z/2/

app.directive('requiredConfig', function($compile){
    return {
        link: function(scope, element, attrs){
            console.log(attrs.requiredConfig);
            console.log(attrs.ngRequired);
            attrs.ngRequired = (attrs.requiredConfig == "true") ? true : false;
            $compile( element.contents() )( scope );
            console.log(attrs.ngRequired);
            console.log('_______________________');
        }
    }
});

我期望的是第一个字段选项是必需的，而第二个字段仍然是可选的。

谢谢！

【问题讨论】：

在这里找到我的答案：stackoverflow.com/questions/21687925/…
如果你的问题是重复的，我建议删除它。否则，最好用您希望其他人如何为您回答问题来回答您自己的问题。（即不仅仅是一个链接）

标签： angularjs angularjs-directive angularjs-compile

【解决方案1】：

代替

attrs.required = (attrs.requiredConfig == "true") ? true : false;

使用

if (attrs.requiredConfig == "true"){
    element.attr('required', 'true');
}

【讨论】：

【解决方案2】：

感谢Angular directive how to add an attribute to the element?，这就是我最终所做的：

angular.module( 'app' )
.directive
(
    'requiredByConfig',
    function( $compile, Utils ){
        var directive = {
            terminal: true,
            priority: 1001,
            compile: function( element, scope ){
                var configKey = element.attr( 'required-by-config' );
                var req = Utils.getRequiredFromConfig(configKey) // Injected;

                // Remove this directive in order to avoid infinite compile loop.
                element.removeAttr( 'required-by-config' );

                // Add the required directive with the required value.
                element.attr( 'ng-required', req );

                // Compile the new directive
                $compile( element.contents() )( scope );

                var fn = $compile( element );
                return function( scope ){
                    fn( scope );
                };
            }
        };

        return directive;
    }
);

但是，更好的解决方案是使用过滤器：

angular.module( 'app' ).filter
( 'requiredByConfig',
    function( Utils ){
        return function( initialValue, configKey, visible ){
            if( angular.isDefined( visible ) && !visible ){
                // If the input is hidden, we don't want to require it.
                return false;
            }

            // Get the config setting. If available, overwrite the default.
            if( angular.isDefined( Utils.SETTINGS[ configKey ] ) ){
                // A config exists for this field. Return the value of the config.
                return Utils.getBoolean( Utils.SETTINGS[ configKey ] );
            } else {
                // Return the initial required value
                return initialValue;
            }
        }
    }
)

【讨论】：