1

对不起，如果标题不清楚，这就是我想要做的：

我有多个注册表单，每个注册表单都有一个密码字段。现在，我想对密码设置一些要求，即。我想得到一个长于 5 的密码。

我有：

<form name="myForm">

  <!-- some elements -->

  <input type="password" required ng-model="user.password" name="password" ng-minlength="5">

在那之后：

<div ng-show="myForm.password.$error.minlength">    
    Password is too short.    
</div>

<!-- some other elements -->

</form>

我以为我会将此错误消息重构为指令，唯一的问题是我似乎无法正确地将表单的名称传递给指令。

该指令如下所示：

myApp.directive('passwordLengthError', [function () {
    return {
        restrict: 'E',
        replace: true,
        template:'<div ng-show="{{form}}.password.$error.minlength">Password is too short.</div>',
        scope: {
            form: '@'
        }
    };
}]);

我这样称呼它：

<div>
   <password-length-error form="myForm"/>
</div>

如果我检查 Chrome 的网络检查器，我看到参数在那里，我看到

<div ng-show="myForm.password.$error.minlength">

但是，它实际上不起作用，如果密码短于 5 个字符，我看不到消息弹出。

有没有办法使这项工作，或者这是不可能的？提前致谢。

4

1 回答 1

1

在@您的隔离范围内正在尝试评估角度表达式。您只是传递一个字符串，因此您可以直接将范围变量设置为指令中的属性值，而无需任何隔离范围或属性评估。

所以：

scope.form = attrs.form;

整个指令将是：

app.directive('passwordLengthError', [function () {
    return {
        restrict: 'E',
        replace: true,
        template:'<div ng-show="{{form}}.password.$error.minlength">Password is too short.</div>',
        link: function(scope, element, attrs){
          scope.form = attrs.form  // the attribute is a string, so, YAY
        }
    };
}]);

您的演示

于 2013-07-15T01:17:59.590 回答