angularjs - 简单的自定义指令将 ng-attribute 添加到输入元素

Question

我一直在尝试创建一个非常简单的指令来检查属性my-minlength是否为字符串（非空）以及是否为；将属性添加ng-minlength到输入元素。我觉得这应该可行，但它根本行不通。

我的指令

var app = angular.module("fooApplication", [])

app.directive('myMinlength', function() {
    return {
        link: function(scope, element, attrs) {
            if(element == "") {
                attrs.$set('ng-minlength', attrs.myMinlength);
            }
        },
    }
});

我的 HTML

<input type="text" name="foo" my-minlength="5" required/>

编辑建议完全从可能的错误中剥离 - 仍然不起作用。

.directive('myMinlength', ['$compile', function($compile) {
    return {
        link: function(scope, element, attrs) {
           if(true) {
                attrs.$set('ng-minlength', "5");
                $compile(element)(scope);
            }
        },
    }
}]);

Answer 1

您可以使用更简单的方法：

<input type="text" name="foo" ng-minlength="myvar || 0" required/>

如果 scope.myvar 未定义，则 minlength 将为 0

Answer 2

您需要重新编译指令才能将 ng-minlength 属性添加到指令中。尝试这个 ：

.directive('myMinlength', ['$compile', function($compile) {
                return {
                    link: function(scope, element, attrs) {
                       if(element == "") {
                            attrs.$set('ng-minlength', attrs.myMinlength);
                            $compile(element)(scope);
                        }
                    },
                }
            }]);

Answer 3

你应该使用编译

 .directive('myMinlength', function() {
    var directive = {};

    directive.restrict = 'A'; /* restrict this directive to attributess */

    directive.compile = function(element, attributes) {


        var linkFunction = function($scope, element, attributes) {
           attributes.$set('ng-minlength', attrs.myMinlength);
        }

        return linkFunction;
    }

    return directive;
})