指令问题

时间:2015-03-01 12:38:57

标签: javascript angularjs

我正在学习使用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中是否可行?如果是这样,实现这一目标的正确方法是什么?我虽然这是我正在做的方式,但显然不是。

非常感谢你。

1 个答案:

答案 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
};

});