AngularJS case à cocher dans la directive

Question

j'ai donc une directive qui a une case à cocher en elle. Je dois faire un appel de service Web lorsque la valeur de la case à cocher est modifiée. Comment puis-je obtenir la valeur de cette case quand on clique dessus? Je veux que la case à cocher soit limitée à la portée de la directive.

myModule.directive('test', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     scope:{}, 
     template: 
      '<div>'+ 
       '<input type="checkbox" ng-click="toggleRoomLock()" name="lockRoom" value="lock" ng-model="lockRoom">'+ 
      '</div>', 
     link: function(scope, element, attrs) { 
      scope.toggleRoomLock = function(){ 
       //GET VALUE OF CHECKBOX HERE 
      }; 
     } 
    } 
} 

J'ai essayé d'obtenir la valeur à l'aide scope.lockRoom mais je reçois pas défini. Aucune suggestion?

Answer 1

La façon la plus simple est de supprimer l'attribut ng-click à partir du modèle et de mettre une montre sur le modèle. Modifier la fonction de lien vers:

function (scope, element, attrs) { 
    scope.lockRoom = false; // initialize to unchecked 

    scope.$watch('lockRoom', function (value) { 
     // value will contain either true or false depending on checked state 
    }); 
} 

$watch vous permet d'écouter des changements sur vos modèles (objets essentiellement ajouté à scope).

Example plunker (valeur connecté à la console).

Answer 2

Vous devriez être en mesure d'obtenir la valeur de scope.lockRoom de votre fonction bascule:

'<input type="checkbox" ng-click="toggle()" ng-model="lockRoom">' 
... 
scope.toggle = function() { 
    console.log('lockRoom=',scope.lockRoom) 
} 

Plunker

Cependant, ng-change est généralement utilisé avec des cases à cocher, plutôt que ng-click:

'<input type="checkbox" ng-change="toggle()" ng-model="lockRoom">' 

L'utilisation de ou ng-click peut être plus efficace t han en utilisant $watch, puisque la fonction toggle() ne sera pas appelé à chaque cycle digérer, comme le $watch est.