Problème de portée isolée

Question

Je n'ai presque aucune expertise lorsque je travaille avec des étendues isolées sur angulaire mais j'ai trouvé quelque chose pour un projet que j'utilisais pour vérifier la force d'un nom d'utilisateur avec une directive Angular.

Telle est la directive:

function usernameStrength() { 
    return { 
    require: 'ngModel', 
    restrict: 'E', 
    scope: { 
     username: '=ngModel' 
    }, 

    link: function(scope, elem, attrs, ctrl) { 

     /** Watch password fields **/ 
     scope.$watch('username', function(newVal) { 
     scope.strength = isSatisfied(newVal && newVal.length >= 8) + 
      isSatisfied(newVal && /[A-z]/.test(newVal)) + 
      isSatisfied(newVal && /(?=.*\W)/.test(newVal)) + 
      isSatisfied(newVal && /\d/.test(newVal)); 

     function isSatisfied(criteria) { 

      return criteria ? 1 : 0; 

     } 
     }, true); 
    } 
} 

Puis sur mon HTML (JADE) i avait une entrée et la directive sur laquelle la barre de progression de la force est affiché et manipulé.

input.form-control(autocomplete="off", type='text', required='', ng-model="register.username") 

étiquette

Force nom d'utilisateur force (ng modèle = « register.username »)

Jusqu'à ici tout fonctionne bien, mais si j'ajouter un objet sur le contrôleur pour stocker toutes les données la forme (ce qui est un assistant) et réglez l'entrée ng-model comme cette ng-model="register.data.username" (même chose sur le nom d'utilisateur -force directive) Étant données dans le contrôleur cet objet

vm.data = {}; 

Les montres $ de la directive n'ont plus accès à l'entrée.

Answer 1

Avec votre code, vous mettez le nom d'utilisateur-force sur l'étiquette tandis que votre directive est seulement déclenchée pour l'élément avec le nom 'user-strength'. C'est faux, donc la montre $ ne fonctionne pas.

1. Le ngModel lie une entrée, sélectionnez, textarea, pas l'étiquette.
2. Vous devez modifier le restrict à « A » au lieu de « E », et le mettre dans la votre entrée [texte]

Fixed

Vous essayez de suivre l'état du champ de texte nom d'utilisateur et imprimez quelque chose comme la force du texte sur l'étiquette. Vous pouvez étudier à partir de ce sample. (source)