web-dev-qa-db-fra.com

La case à cocher ne lie pas à la portée dans angularjs

J'essaie de lier une case à cocher à la portée en utilisant ng-model. L'état initial de la case à cocher correspond parfaitement au modèle d'étendue, mais lorsque je coche/décoche la case, le modèle ne change pas. Certains éléments à noter sont que le modèle est chargé dynamiquement au moment de l'exécution à l'aide de 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


<input type="checkbox" ng-model="billing_is_shipping"/>

Lorsque je coche la case, la console enregistre faux, lorsque je décoche la case, la console enregistre à nouveau faux. J'ai aussi un modèle de commande sur la portée, et si je change le modèle de la case à cocher pour qu'il soit order.billing_is_shipping, cela fonctionne bien

angularjsbindingcheckboxcoffeescriptangularjs-ng-include
56
chris

J'ai lutté avec ce problème pendant un moment. Ce qui a fonctionné a été de lier l’entrée à un objet plutôt qu’à une primitive.

<!-- Partial -->
<input type="checkbox" ng-model="someObject.someProperty"> Check Me!

// Controller
$scope.someObject.someProperty = false
147
Matt

Si le modèle est chargé avec ng-include, vous devez utiliser $parent pour accéder au modèle défini dans la portée parente depuis ng-include _ si vous souhaitez mettre à jour en cliquant sur la case à cocher.

<div ng-app ng-controller="Ctrl">
    <div ng-include src="'template.html'"></div>
</div>

<script type="text/ng-template" id="template.html">
    <input type="checkbox" ng-model="$parent.billing_is_shipping" ng-change="checked()"/>
</script>

function Ctrl($scope) {
    $scope.billing_is_shipping = true;

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

DEMO

23
zs2020

En développant la réponse de Matt , voyez cette vidéo Egghead.io qui traite de ce problème et explique: Pourquoi la liaison directe de propriétés à $ scope peut causer des problèmes

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

Cela est généralement dû à une autre directive entre votre contrôleur ng et votre entrée qui crée une nouvelle portée. Lorsque la sélection écrit sa valeur, elle l'écrit dans la portée la plus récente afin de l'écrire dans cette portée plutôt que le parent plus éloigné.

La meilleure pratique consiste à ne jamais lier directement une variable de la portée dans un fichier ng-model, ceci est également connu comme incluant toujours un "point" dans votre ngmodel.

9
Rk220

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

link: function(scope, element, attrs) {
            "use strict";

            scope.success = false;

Et dans le modèle de portée inclus tag d'entrée comme:

<input type="checkbox" ng-model="success">

Cela n'a pas fonctionné.

En fin de compte, j'ai modifié ma variable de portée pour qu'elle ressemble à ceci:

link: function(scope, element, attrs) {
            "use strict";

            scope.outcome = {
                success : false
            };

Et ma balise d’entrée ressemble à ceci:

<input type="checkbox" ng-model="outcome.success">

Cela fonctionne maintenant comme prévu. Je connaissais une explication à cela, mais j'oubliais, peut-être que quelqu'un me la remplira. :)

9
ancajic