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>

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

请参阅指令定义的代码：

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绑定到我在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">

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

非常感谢你。

Answer 1

尝试使用双向绑定＆＃39; =＆＃39;而不是文本绑定＆＃39; @＆＃39;在你的指令中：

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

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

});

指令问题

1 个答案: