Case à cocher non liée à la scope dans angularjs

J’essaie de lier une case à cocher à la scope en utilisant ng-model. L’état initial de la case à cocher correspond bien au modèle de scope, mais lorsque je coche / décoche la case à cocher, le modèle ne change pas. Certaines choses à noter est que le modèle est chargé dynamicment à l’exécution en utilisant ng-include

app.controller "OrdersController", ($scope, $http, $location, $state, $stateParams, Order) -> $scope.billing_is_shipping = false $scope.bind_billing_to_shipping = -> console.log $scope.billing_is_shipping  

Lorsque je coche la case la console se connecte faux, quand je décoche la case, la console à nouveau se connecte faux. J’ai aussi un modèle de commande sur la scope, et si je change le modèle de la case à cocher pour qu’il soit order.billing_is_shipping, cela fonctionne bien

J’ai lutté avec ce problème pendant un moment. Ce qui a fonctionné était de lier l’entrée à un object au lieu d’une primitive.

   Check Me! // Controller $scope.someObject.someProperty = false 

Si le modèle est chargé à l’aide de ng-include , vous devez utiliser $parent pour accéder au modèle défini dans la scope parent depuis ng-include si vous souhaitez le mettre à jour en cliquant sur la case à cocher.

 
function Ctrl($scope) { $scope.billing_is_shipping = true; $scope.checked = function(){ console.log($scope.billing_is_shipping); } }

DEMO

Dans ma directive (dans la fonction de lien ), j’avais créé une variable variable de succès comme ceci:

 link: function(scope, element, attrs) { "use ssortingct"; scope.success = false; 

Et dans le modèle de scope, une balise d’entrée telle que:

  

Cela n’a pas fonctionné.

Au final, j’ai changé ma variable de scope pour ressembler à ceci:

 link: function(scope, element, attrs) { "use ssortingct"; scope.outcome = { success : false }; 

Et mon tag d’entrée pour ressembler à ceci:

  

Cela fonctionne maintenant comme prévu. Je connaissais une explication pour cela, mais j’ai oublié, peut-être que quelqu’un le remplira pour moi. 🙂

En développant la réponse de Matt , veuillez consulter cette vidéo d’Egghead.io qui traite de ce problème et fournit une explication: Pourquoi la liaison directe des propriétés à $ scope peut-elle poser des problèmes?

voir: https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

Cela est généralement dû à une autre directive entre votre contrôleur ng et votre entrée qui crée une nouvelle scope. Lorsque la sélection enregistre la valeur, elle l’écrira jusqu’à la scope la plus récente, elle l’écrira donc dans cette scope plutôt que dans le parent plus éloigné.

La meilleure pratique consiste à ne jamais se lier directement à une variable de la scope dans un ng-model , cela étant également connu comme comportant toujours un “point” dans votre modèle ng.