have - Casilla de verificación no vinculante para el alcance en angularjs

ng app app

Question

Estoy tratando de enlazar una casilla de verificación con el alcance usando ng-model. El estado inicial de la casilla de verificación corresponde al modelo del alcance, pero cuando selecciono / desmarco la casilla de verificación, el modelo no cambia. Algunas cosas a tener en cuenta es que la plantilla se carga dinámicamente en tiempo de ejecución usando 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"/>

Cuando marque la casilla de verificación de la consola falsa, cuando desactive la casilla, la consola nuevamente registra falso. También tengo un modelo de orden en el alcance, y si cambio el modelo de la casilla de verificación para que sea order.billing_is_shipping, funciona bien

Answer 1

Ampliando la respuesta de Matt , vea este video Egghead.io que aborda este mismo problema y proporciona una explicación para: ¿Por qué el enlace de propiedades directamente a $ scope puede causar problemas?

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

Por lo general, esto se debe a otra directiva entre su controlador ng y su entrada que está creando un nuevo alcance. Cuando el seleccionador escribe su valor, lo escribirá en el alcance más reciente, por lo que lo escribiría en este ámbito en lugar de hacerlo en el elemento primario que está más lejos.

La mejor práctica es no vincularse nunca directamente a una variable en el alcance en un ng-model , esto también se conoce como incluir siempre un "punto" en su ngmodel.

Answer 2

En mi directiva (en la función de enlace ) había creado un éxito de variable de ámbito como este:

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

            scope.success = false;

Y en la plantilla de alcance se incluía una etiqueta de entrada como:

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

Esto no funcionó.

Al final, cambié mi variable de ámbito para que se vea así:

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

            scope.outcome = {
                success : false
            };

Y mi etiqueta de entrada se ve así:

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

Ahora funciona como se esperaba. Sabía una explicación para esto, pero lo olvidé, tal vez alguien lo complete por mí. :)

Answer 3

Luché con este problema por un tiempo. Lo que funcionó fue vincular la entrada a un objeto en lugar de a un primitivo.

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

// Controller
$scope.someObject.someProperty = false

Answer 4

Si la plantilla se carga usando ng-include , debe usar $parent para acceder al modelo definido en el alcance principal, ya que ng-include si desea actualizar haciendo clic en la casilla de verificación.

<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