我正在学习使用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中是否可行?如果是这样,实现这一目标的正确方法是什么?我虽然这是我正在做的方式,但显然不是。
非常感谢你。
答案 0 :(得分: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
};
});