CODEWITHSUNDEEP
javascriptangularjs
fgonzalez
fgonzalez

Reputation: 3877

Issue with directives

I'm learning the use of the directives in AngularJS. I have a password.html file with a input password and then I have created my own directive 'passwordRequirement' to force the user to meet these requirements when creating a user. This is the code of 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>

As each requirement is binded to a different property in the scope, in the definition of the directive I have specified in the scope the variable "binding".

See the code of the definition of the directive:

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

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

});

And then the html template for the password requirement (which consists in a label plus a checkbox to be checked or not depending if the requirement is met or not):

<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>

As you can see I want bind the ng-model to the variable I have specified in password.html. However if I print the value of the bind property using {{binding}}, it prints the correct values. But if I inspect the source code of the page I see:

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

Which means that in the page the variable binding it is not being interpreted so that it is not working properly. Why? I cannot do data-ng-model={{binding}} , so what is the solution for this? Is this doable in AngularJs? If so, what is the right way to achieve that? I though it was the way I'm doing but apparently is not.

Thank you very much in advance.

Upvotes: 1

Views: 34

Answers (1)

Marian Ban
Marian Ban

Reputation: 8168

Try to use two-way binding '=' instead of text binding '@' in your directive:

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

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

});

Upvotes: 1

Related Questions