javascript - 指令问题

Question

我正在学习 AngularJS 中指令的使用。我有一个包含输入密码的password.html 文件，然后我创建了自己的指令“passwordRequirement”以强制用户在创建用户时满足这些要求。这是password.html的代码:

<div class="form-group">
<label for="user_password">Password</label>
<input type="password" data-ng-change="passwordChanged();" data-ng-model="user.password" class="form-control" id="user_password" name="user_password"
       placeholder="Password" required>
<div data-ng-show="enteredPassword">
<h4>For your security, the password needs to meet the following requirements</h4>

    <password-requirement binding="passwordContainLowercase">Password must contain at least a lowercase character</password-requirement>
    <br>
    <password-requirement binding="passwordContainUpperCase">Password must contain at least uppercase character</password-requirement>
    <br>
    <password-requirement binding="passwordLengthValid">Password length must be between 12 and 20 characters</password-requirement>
    <br>
    <password-requirement binding="passwordContainDigit">Password must contain at least a digit</password-requirement>

</div>
</div>

由于每个要求都绑定(bind)到范围中的不同属性，因此在指令的定义中，我在范围中指定了变量“绑定(bind)”。

查看指令定义的代码:

app.directive('passwordRequirement',function()
{

return {
      restrict: 'E',
      scope:{binding:'@'},
      templateUrl:'partials/content/common/passwordRequirement.html',
      transclude:true
};

});

然后是密码要求的 html 模板(其中包含一个标签和一个要选中或不选中的复选框，具体取决于是否满足要求):

<div style="display:inline-block;">
<span data-ng-transclude></span>
<input type="checkbox" data-ng-disabled="true" data-ng-model="binding" data-ng-checked="binding">

{{binding}}
</div>

如您所见，我想将 ng-model 绑定(bind)到我在 password.html 中指定的变量。但是，如果我使用 {{binding}} 打印绑定(bind)属性的值，它会打印正确的值。但是如果我检查页面的源代码，我会看到:

 <input type="checkbox" data-ng-disabled="true" data-ng-model="binding" data-ng-checked="binding" class="ng-pristine ng-valid" disabled="disabled"  checked="checked">

这意味着在页面中，变量绑定(bind)没有被解释，因此它无法正常工作。为什么？我无法执行 data-ng-model={{binding}} ，那么解决方案是什么？这在 AngularJs 中可行吗？如果是这样，实现这一目标的正确方法是什么？我以为这就是我正在做的事情，但显然不是。

提前非常感谢您。

Answer 1

尝试在指令中使用双向绑定(bind)“=”而不是文本绑定(bind)“@”:

app.directive('passwordRequirement',function()
{

return {
      restrict: 'E',
      scope:{binding:'='},// here is the change
      templateUrl:'partials/content/common/passwordRequirement.html',
      transclude:true
};

});